React路由器导航问题在语义Ui React

Question

我有一个通过Route导航页面的问题。我使用语义ui react组件来处理这个问题。

当我链接导航栏中的任何项目时，url更改为http://localhost:3000/到http://localhost:3000/list，但相关组件页面无法打开。

我该如何修复它?

下面是我的index.js代码。

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

下面是我的App.js代码。

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;

下面是我的路由组件。

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

export default Route;

下面是我的Header组件。

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;

Answer 1

以Switch为例包装路由:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

文档:https://reactrouter.com/web/api/Switch