當我單擊儀表板中的菜單時，React 路由器顯示空白頁

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>

試試這個，如果您有更多問題，請告訴我。