why the component doesn't load in nested routing (react)

Question

Here i want to load the ShowIt component as a nested route but it doesn't work i mean when i click on the link i go to route of that but the ShowIt component (hello world) doesn't load and i really need to solve this problem
please help me

    import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom';

const ShowIt = <div>Hello world</div>;

const Links = (
  <div>
    <Link to="news/components">Go to Components</Link>
    <br/>
    <Link to="news/states-vs-props">Go to states vs props</Link>
  </div>
);

const News = () => {
  return (
    <div>
      {
        Links
      }
      <Router>
        <Switch>
          <Route path="news/:id">
            <ShowIt />
          </Route>
        </Switch>
      </Router>
    </div>
  );
};

export default News;

Ajeet Shah · Accepted Answer · 2020-10-11 15:38:27Z

1

You should not use <Link> outside a <Router>. So do this:

<Router>
  {Links}
  <Switch>
    <Route path="/news/:id">
      <ShowIt />
    </Route>
  </Switch>
</Router>

There are few more issues in your code:

Make ShowIt a react component:

const ShowIt = () => <div>Hello world</div>;

Use a /some-route instead of some-route:

<Link to="/news/components">Go to Components</Link>

And, to access id in ShowIt component:

import { useParams } from "react-router-dom";
// ...
const { id } = useParams<{ id: string }>();

answered Oct 11, 2020 at 15:38

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

Collectives™ on Stack Overflow

why the component doesn't load in nested routing (react)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related