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;

Nacho · Accepted Answer · 2021-10-15 10:56:53Z

2

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

answered Oct 15, 2021 at 10:56

Nacho

9741 gold badge7 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sercan Noyan Germiyanoğlu Over a year ago

The relevant component cannot be opened.

Nacho Over a year ago

@TonyBrand i dont understand your created Route component, Route is a component from the react-router-dom library, it could may conflict having the same name?

Sercan Noyan Germiyanoğlu Over a year ago

I also used Route from react-router but it didn't work.

Nacho Over a year ago

@TonyBrand you used the Route from react-router wrapped with the Switch component and didnt work... And maybe some kind of error in the import or export... Can you provide an example in codeSandbox to play with?

Sercan Noyan Germiyanoğlu Over a year ago

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Collectives™ on Stack Overflow

React Router Navigate Issue in Semantic Ui React

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related