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>
        )
    }
经验分享 程序员 微信小程序 职场和发展