Reactで定義したメソッドが実行されない理由が不明

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件

ベストアンサー

そもそもRoute に二個同じパスを指定するのが出来ないとかじゃないでしょうか
1個のパスに1個のコンポーネントを関連付けるのが Routerだと思ってたのですが

投稿2023/01/10 13:29

編集2023/01/10 13:44

yuma.inaura

総合スコア1427

回答へのコメント

lop000p

2023/01/12 13:49 編集

import React from "react"; import './App.css'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import {default as Home} from "./Home"; const App = () => ( <BrowserRouter> <Routes> <Route id="root" path="/" element={<Home />} /> </Routes> </BrowserRouter> import React from 'react'; const Home = () => { return ( <div> <div> <header> <h1 className="center">ReactでTodoList作成</h1> </header> </div> <form > <div> <input type="text" className="centerInput" /> </div> </form> </div> ) } export default Home; )1個のパスにまとめるように修正したら動きました。。間違えに気づかず、Routerの使い方を間違えておりました。。いつもご指摘いただきありがとうございます😢