对于这种情况，我如何在 "exact paramater" 的嵌套页面中使用 React 路由器？

Question

我需要从路由器主页访问其他组件。使用我安装的这个结构，“404”页面不会打开。此外，当我将确切的路径 ="/" 参数应用于私有路由时，Home 组件不会呈现。我该如何解决这些问题？

提前感谢您的回答。

这是我的 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>

Answer 1

如果您不使用 exact，它永远不会呈现 Fourzerofour，因为所有路径都匹配 "/"。

但是，如果您使用 exact，那么您的主组件允许的唯一路径是 "/"。这意味着 /profile 和 /pets/:id 不会渲染。

因此，要解决此问题，您可能必须指定主组件的所有路径

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

对于这种情况，我如何在 "exact paramater" 的嵌套页面中使用 React 路由器？

How can I use react router in nested page with "exact paramater" for my this scenario?

javascript

nested-routes

reactjs

react-router

react-router-dom