Why does my React component not render when using React-Router?

Question

I've set up my React router in App.js. Pages component do render. When I click on a link, then the Page component won't render, but the URL in the browser changes to "page/{id}". Why is this?

Pages component:

function Pages(props) {   const managedPages = JSON.parse(localStorage.getItem("managedPages"));   console.log(managedPages);

  return (
    <div>
      <List>
        {managedPages.map(page => (
          <ListItem key={page.id}>
            <Link
              to={`/page/${page.id}`}
              style={{ textDecoration: "none", color: "black" }}
            >
              <ListItemText primary="Teszt Színház" />
            </Link>
          </ListItem>
        ))}
      </List>
      <Route path="/page" component={Page} />
    </div>   ); }

App.js jsx:

 return (
<MuiPickersUtilsProvider utils={MomentUtils}>
        <BrowserRouter>
          <div className="App">
            <BarAndMenu
              userLoginAndDataDownloadCompletedOut={
                this.userLoginAndDataDownloadCompletedOut
              }
            />
          </div>
          <Switch>
            <Route path="/" exact component={OngoingEventList} />
            <Route path="/selectSeat" component={SelectSeat} />
            <Route path="/releasePurpose/:id" component={ReleasePurpose} />
            <Route
              path="/marketingResourceConfigurationAndResult/:id"
              component={MarketingResourceConfigurationAndResult}
            />
            <Route path="/myTickets" exact component={MyTicketList} />
            <Route path="/myTickets/:id" component={MyTicket} />
            <Route path="/auditoriumList/:id" component={AuditoriumSelector} />
            <Route path="/pages" component={Pages} />
          </Switch>
        </BrowserRouter>
</MuiPickersUtilsProvider utils={MomentUtils}>
    );

technophyle · Accepted Answer · 2020-02-02 18:49:05Z

1

It's because /page/:id and /page are two different patterns, and they don't match.

Change your Route definition to something like this:

<Route path="/page/:id" component={Page} />

Also, you defined /page route inside /pages route, which is not rendered as soon as you navigate to /page:id. So, pull the route definition out of Pages component, and it should work.

https://reacttraining.com/react-router/web/example/url-params

edited Feb 2, 2020 at 18:49

answered Feb 2, 2020 at 18:37

technophyle

9,3777 gold badges34 silver badges52 bronze badges

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

3 Comments

Henrik Hollósi Over a year ago

I've did that, but Page still doesn't render. I also have a similar link in Page that doesn't use a param, but that doesn't render either.

technophyle Over a year ago

can you also add your App.jsx?

technophyle Over a year ago

What could have happened is you didn't wrap the whole thing with Router (e.g. BrowserRouter), which is needed.

Collectives™ on Stack Overflow

Why does my React component not render when using React-Router?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related