我试图将我的一些路由与React Router v4组合在一起以清理我的一些组件 . 现在我只想让我的非登录路由组合在一起,我的管理路由组合在一起,但以下操作不起作用 .
main.js
const Main = () => {
return (
<main>
<Switch>
<Route exact path='/' component={Public} />
<Route path='/admin' component={Admin} />
</Switch>
</main>
);
};
export default Main;
public.js
const Public = () => {
return (
<Switch>
<Route exact path='/' component={Greeting} />
<Route path='/signup' component={SignupPage} />
<Route path='/login' component={LoginPage} />
</Switch>
);
};
export default Public;
Greeting组件显示在“localhost:3000 /”,但SignupPage组件不显示在“localhost:3000 / signup”,而Login组件不显示在“localhost:3000 / signup” . 看看React Dev Tools,这两条路由返回Null .
1 回答
原因很明显 . 对于main.js中的路由,您已指定
Public
组件的路径路径与确切的exact path='/'
,然后在公共组件中为另一个Routes
匹配 . 因此,如果路径路径是/signup
,则首先路径不准确,因此不会渲染Public
组件,因此没有子路径 .将您的路线配置更改为以下内容
main.js
public.js
此外,当您指定嵌套路线时,这些路线应该相对于父路线,例如,如果父路线是
/home
,然后在子路线中,您希望写入/dashboard
. 它应该写成甚至更好