Tengo un problema con la navegación de páginas a través de Ruta. Utilicé componentes de reacción de interfaz de usuario semántica para manejar el problema.

Cuando vinculo cualquier elemento en la barra de navegación, la URL se cambia como http://localhost:3000/ a http://localhost:3000/list pero la página del componente relevante no se puede abrir.

¿Cómo puedo arreglarlo?

Aquí está mi código index.js que se muestra a continuación.

 ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById('root') );

Aquí está mi código App.js que se muestra a continuación.

 function App() { return ( <div className="App"> <Container style={{"marginTop": "20px"}}> <Header /> <Route path="/"> <AccordionComponent items={items} /> </Route> <Route path="/list"> <Search /> </Route> <Route path="/dropdown"> <DropdownForm options={options}/>; </Route> <Route path="/translate"> <Translate /> </Route> </Container> </div> ); } export default App;

Aquí está mi componente de ruta que se muestra a continuación.

 const Route = ({ path, children }) => { return window.location.pathname === path ? children : null; }; export default Route;

Aquí está mi componente de encabezado que se muestra a continuación.

 import React, { useState } from 'react'; import { Menu } from 'semantic-ui-react' import { Link } from "react-router-dom"; const Header = () => { const [activeItem, setActiveItem] = useState('Accordion'); const handleItemClick = (name) => setActiveItem(name) return ( <Menu secondary pointing> <Menu.Item as={Link} to="/" name='Accordion' active={activeItem === 'Accordion'} onClick={() => handleItemClick('Accordion')} /> <Menu.Item as={Link} to="/list" name='Search' active={activeItem === 'Search'} onClick={() => handleItemClick('Search')} /> <Menu.Item as={Link} to="/dropdown" name='Dropdown' active={activeItem === 'Dropdown'} onClick={() => handleItemClick('Dropdown')} /> <Menu.Item as={Link} to="/translate" name='Translate' active={activeItem === 'Translate'} onClick={() => handleItemClick('Translate')} /> </Menu> ); }; export default Header;