React router dom 为某些路由添加 headers 和仪表板

Question

我在我的 React 版本 15 应用程序中使用 React 路由器 dom 版本 5，我想知道如何在除身份验证和注册页面。

我尝试对路径名进行测试，但在更改页面或尝试断开连接时总是有延迟，每次都必须刷新页面。这是我的代码：

          <Router>
            {pathname !=='/' && pathname !== '/sign-in' && pathname !== '/sign-up' && 
              <>
                <Header></Header>
                <Dashboard ></Dashboard> 
              </>  
            }
          <Switch>
                <Route exact path='/' component={SignIn} />
                <Route path="/sign-in" component={SignIn} />
                <Route path="/sign-up" component={SignUp} />
                {
                  sessionStorage.getItem("token") === null ?
                  <Redirect  to='/sign-in'/>  :
                  <>
                  <Route path="/home" component={Home} />
                  <Route path="/management" component={Management} />
                  <Redirect  to='/home'/>  :

                </>
                }
                
          </Switch>
          </Router>

编辑：我正在尝试在路由标签内进行渲染，效果很好。但是，我想优化我的代码：

          <Router>
          <Switch>
                <Route exact path='/' component={SignIn} />
                <Route path="/sign-in" component={SignIn} />
                <Route path="/sign-up" component={SignUp} />
                {
                  sessionStorage.getItem("token") === null ?
                  <Redirect  to='/sign-in'/>  :
                  <>
                  <Route path="/home" render={() =><> <Header/> 
                  <Dashboard/><Home/></>} />
                  <Route path="/management"  render={() =><> <Header/> 
                  <Dashboard /><Management/></>} />
                  <Redirect  to='/home'/>  :

                </>
                }
                
          </Switch>
          </Router>

Answer 1

在 react-router-dom v5 中，您可以将 Header 和 Dashboard 渲染到 Route 中，并带有一组您希望它们在其上渲染的路径。在 Router 内但在 Switch 外渲染 Route，以便它可以包含匹配和渲染。

示例：

<Router>
  <Route path={["/home", "/management]}>
    <>
      <Header />
      <Dashboard /> 
    </>
  </Route>
  <Switch>
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} />
    {sessionStorage.getItem("token") === null
      ? <Redirect  to='/sign-in'/>
      : (
        <>
          <Route path="/home" component={Home} />
          <Route path="/management" component={Management} />
          <Redirect  to='/home'/>
        </>
    )}      
    <Route path='/' component={SignIn} />
  </Switch>
</Router>

如果允许的路由数量远远超过要隐藏 header 和仪表板的路由数量，则使用 children 渲染函数并访问 location 属性。

<Router>
  <Route 
    children={({ location }) => {
      return !["/", "/sign-in", "/sign-up"].includes(location.pathname)
        ? (
          <>
            <Header />
            <Dashboard /> 
          </>
        )
        : null;
    }}
  />
  <Switch>
    <Route exact path='/' component={SignIn} />
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} />
    {sessionStorage.getItem("token") === null
      ? <Redirect  to='/sign-in'/>
      : (
        <>
          <Route path="/home" component={Home} />
          <Route path="/management" component={Management} />
          <Redirect  to='/home'/>
        </>
    )}      
  </Switch>
</Router>

或者将 header 和仪表板抽象为一个组件，该组件使用 useRouteMatch 挂钩来测试要排除的路由数组。

const HeaderDash = () => {
  const isExcludedMatch = useRouteMatch({
    path: ["/", "/sign-in", "/sign-up"],
    exact: true,
  });
  return isExcludedMatch
    ? null
    : (
      <>
        <Header />
        <Dashboard /> 
      </>
    );
};

...

<Router>
  <Route component={HeaderDash} />
  <Switch>
    <Route exact path='/' component={SignIn} />
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} />
    {sessionStorage.getItem("token") === null
      ? <Redirect  to='/sign-in'/>
      : (
        <>
          <Route path="/home" component={Home} />
          <Route path="/management" component={Management} />
          <Redirect  to='/home'/>
        </>
    )}      
  </Switch>
</Router>

React router dom 为某些路由添加 headers 和仪表板

React router dom add headers and dashboard for certain routes

reactjs

react-router-dom