React Router Navigate Issue in Semantic Ui React

Question

I have an issue with navigating pages via Route. I used semantic ui react components to handle with the issue.

When I link any item in navbar, the url is changed like http://localhost:3000/ to http://localhost:3000/list but the relevant component page cannot open.

How can I fix it?

Here is my index.js code shown below.

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

Here is my App.js code shown below.

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;

Here is my Route Component shown below.

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

Here is my Header Component shown below.

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

Wrap de routes with Switch as this example:

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>

Docs: https://reactrouter.com/web/api/Switch