Question

我有2个页面，在我的主页中，有一种方法可以呈现登录，注册和仪表板页面，而在我的仪表板中，如果单击侧边栏菜单，则可以呈现内容。问题是，如果我单击侧边栏菜单来呈现内容，它将呈现空白页面。

我的主页

  render() {
    return(
        <Switch>

            <Route path ="/home" exact component={Home}/>
            <Route path="/login" exact component={LoginForm}/>
            <Route path="/register/" exact component={RegisterForm}/>
            <Route path="/dashboard" component={dashboard}/>
            <Redirect exact from="/" to="/home"/>
        </Switch>
    )
  }
}

我的仪表板

<div class="wrapper">
        <NavBar />
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
          <SidebarMenu />
        </aside>
        <div class="content-wrapper">
            //my content
            <Route path="/dashboard/userlist" exact component={ListUser}/>
        </div>
</div>

我只想渲染内容而不渲染侧边栏菜单。但是它显示空白页面，就像回到主页一样。如果我在首页中放置route path =“ / dashboard / userlist”，它的工作可是他渲染的一切我只想渲染内容。

我仍在学习使用此反应路由器。

Answer 1

当您重定向到“ / dashboard / userlist”时，它会通过switch语句，并且由于没有匹配项，它将重定向到hom，这意味着它会通过您的重定向组件。

带上

 <Route path="/dashboard/userlist" exact component={ListUser}/>

在

顶部

 <Route path="/dashboard" component={dashboard}/>

并在此名称中添加“精确”。

<Route path="/dashboard" exact component={dashboard}/>

所以应该是这样

<Switch>
    <Route path ="/home" exact component={Home}/>
    <Route path="/login" exact component={LoginForm}/>
    <Route path="/register/" exact component={RegisterForm}/>
    <Route path="/dashboard/userlist" exact component={ListUser}/>
    <Route path="/dashboard" exact component={dashboard}/>
    <Redirect exact from="/" to="/home"/>
</Switch>

尝试一下，让我知道是否还有其他问题。

当我单击仪表板中的菜单时，React Router显示空白页

1 个答案: