时间戳

首页 > 解决方案 > 在这种情况下，如何在嵌套页面中使用带有“精确参数”的反应路由器？

javascript - 在这种情况下，如何在嵌套页面中使用带有“精确参数”的反应路由器？

问题描述

我需要从路由器主页访问其他组件。使用我安装的这种结构，“404”页面无法打开。此外，当我将确切的路径 =“/” 参数应用于 Private 路由时，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>

标签： javascriptreactjsreact-routerreact-router-domnested-routes

解决方案

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

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

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

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

推荐阅读