如何在嵌套页面中使用反应路由器，并"exact paramater"适用于我的场景？

Question

我需要从路由器主页访问其他组件。利用我安装的这种结构；404〃；页面未打开。此外，当我应用精确路径＝"0"时/"参数设置为"专用路由"，则主组件不会渲染。我该如何解决这些问题？

提前感谢您的回答。

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

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