React子路由跳转,显示空白
在使用React菜单组件,点击跳转不显示子路由,直接跳到空白页面 在子路由的上一级路由里,不能使用exact 会导致父级路由路径不匹配从而父子组件都显示不了 父级路由
render() {
return (
<Router>
<Switch>
<Route path="/login" component={
LoginRegister} />
<Route path="/register" component={
LoginRegister} />
<Route path="/" component={
Layouts} />
{
/* 这里不能加exact,会导致子路由匹配不到 */}
{
/* <Route component={NotFound} /> */}
</Switch>
</Router>
);
}
子路由
render() {
return (
<Content
style={
{
margin: 0 16px, overflow: initial, backgroundColor: "transparent" }}
className="site-layout-background"
>
<Breadcrumb style={
{
margin: 15px,
fontSize: "16px"
}} >
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>图标</Breadcrumb.Item>
</Breadcrumb>
<Switch>
<Route path="/home" component={
Homes} />
<Route path="/icon" component={
Icon} />
{
/* <Route component={NotFound} /> */}
{
/* <Redirect to /> */}
</Switch>
{
this.props.children}
</Content>
)
}
