语义UI React中的React Router Navigate问题

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