React Router 在语义中导航问题 Ui React

Question

我在通过路由导航页面时遇到问题。我使用语义 ui 反应组件来处理这个问题。

当我 link 导航栏中的任何项目时， 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;

下面是我的页眉组件。

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

React Router 在语义中导航问题 Ui React

React Router Navigate Issue in Semantic Ui React

javascript

routes

reactjs