Q&A
react
1import './App.css'; 2import { BrowserRouter, Routes, Route } from 'react-router-dom' 3import React from 'react' 4 5const App = () => ( 6 <BrowserRouter> 7 <div className="body"> 8 <Routes> 9 <Route path="/" element={<Title />} /> 10 <Route path="/" element={<InputBox />} /> 11 12 </Routes> 13 </div> 14 </BrowserRouter> 15) 16 17const Title = () => { 18 return ( 19 <div> 20 <h1 className="center">ReactTodo</h1> 21 </div> 22 ) 23} 24const InputBox = () => { 25 return ( 26 27 <form action="URL"> 28 <div> 29 <input type="text" className="center" /> 30 </div> 31 </form> 32 ) 33} 34 35export default App
CSS
1.body { 2 background-image: url("13527.jpg"); 3 height:1000px; 4 width: 100%; 5} 6.center { 7 text-align:center; 8} 9
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 <meta name="theme-color" content="#000000" /> 8 <meta 9 name="description" 10 content="Web site created using create-react-app" 11 /> 12 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 13 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 14 <title>React App</title> 15 <!-- Bootstrap CSS --> 16 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 17 </head> 18 <body> 19 <noscript>You need to enable JavaScript to run this app.</noscript> 20 <div id="root"></div> 21 </body> 22</html> 23 24
実行したところ、Titleメソッドは実行されているようですが、InputBoxメソッドが実行されておらず、
ブラウザで表示が確認できませんでした。なにが理由かわからず、コンソールにエラーも出ておりません。
こちら原因がわからず教えていただきたいです。
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/01/12 13:49 編集