Как я могу использовать react router на вложенной странице с "точным параметром" для моего этого сценария?

#javascript #reactjs #react-router #react-router-dom #nested-routes

#javascript #reactjs #react-router #react-router-dom #вложенные маршруты

Вопрос:

Мне нужен доступ к другим компонентам с домашней страницы маршрутизатора. С этой структурой, которую я установил, страница «404» не открывается. Кроме того, когда я применяю параметр exact path =»/» к частному маршруту, домашний компонент не отображается. Как мне решить эти проблемы?

Заранее благодарю вас за ваши ответы.

Это мой app.js =>

 <Router>
        <Switch>
          <Route exact path="/login">
            <Login />
          </Route>
          <Route exact path="/register">
            <Register />
          </Route>
          <PrivateRoute exact path="/search">
            <Search />
          </PrivateRoute>
          <PrivateRoute exact path="/"> // This is the part where there's a problem. exact works when I don't add it.
            <Home />
          </PrivateRoute>
          <Route path="*">
            <Fourzerofour />
          </Route>
        </Switch>
</Router>

Это мой Home.js =>

      <Header />
        <Grid className={classes.container} container spacing={3}>
            <Grid className={classes.leftSidebar} item md={3}>
                <LeftSidebar />
            </Grid>
            <Grid item xs={12} md={6}>
                <Switch>
                    <Route path="/">
                        <HomePageFeed />
                    </Route>
                    <Route path="/profile">
                        <ProfileDetail />
                    </Route>
                    <Route path="/pets/:id" component={PetDetail} />
                </Switch>
            </Grid>
            <Grid className={classes.rightSidebar} item xs={12} md={3}>
                <RightSidebar />
            </Grid>
        </Grid>

Ответ №1:

Если вы не используете exact , он никогда не будет отображаться Fourzerofour , потому что все пути совпадают "/" .

Но, если вы используете exact , то для вашего домашнего компонента разрешен только путь "/" . Это означает /profile , что и /pets/:id не будет отображаться.

Итак, чтобы исправить это, вам, вероятно, придется указать все пути для вашего домашнего компонента

 <PrivateRoute exact path={["/", "/profile", "/pets/:id"]}>
   <Home />
</PrivateRoute>