Почему мой компонент React не отображается при использовании React-Router?

Question

Я настроил свой маршрутизатор React в приложении. js. Компоненты страниц визуализируются. Когда я нажимаю на ссылку, компонент страницы не отображается, но URL-адрес в браузере меняется на "page / {id}". Почему это?

Компонент страниц:

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>   ); }

Приложение. 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}>
    );

Answer 1

Это потому, что /page/:id и /page - это два разных шаблона, и они не совпадают.

Измените определение вашего маршрута на что-то вроде этого:

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

Также, Вы определили /page маршрут внутри /pages маршрута, который не отображается после перехода к /page:id. Итак, вытащите определение маршрута из компонента Pages, и оно должно работать.

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