【问题标题】：redirect all the routes to a page将所有路由重定向到一个页面
【发布时间】：2020-09-09 07:59:26
【问题描述】：

我有很多这样的路线

<Switch>
<Route path="/dashboard"   component={Dashboard}     key="dashboard" />
<Route path="/projects"    component={UserProjects}  key="userprojects" />
<Route path="/compute/servers" component={ProjectServerList}   key="projectserverlist" />
<Route path="/compute/snapshots"  component={ServerSnapshotList}  key="ServerSnapshotList" />
<Route path="/compute/keypairs"   component={KeypairList}         key="KeypairList" />

它们工作正常，但如果未设置属性，我希望将它们全部重定向到“/dashboard”

我试过这个：

{myproperty ?
<Switch>
<Route path="/dashboard"   component={Dashboard}     key="dashboard" />
</Switch>
:
<Switch>
<Route path="/dashboard"   component={Dashboard}     key="dashboard" />
<Route path="/projects"    component={UserProjects}  key="userprojects" />
<Route path="/compute/servers" component={ProjectServerList}   key="projectserverlist" />
<Route path="/compute/snapshots"  component={ServerSnapshotList}  key="ServerSnapshotList" />
<Route path="/compute/keypairs"   component={KeypairList}         key="KeypairList" />
  </Switch>
}

并且错误地失败了

我正在使用 "react-router-dom": "^4.3.1", "react-router-redux": "^5.0.0-alpha.9", “反应”：“^16.13.1”，

【问题讨论】：

可能我会尝试使用useHistory 钩子，在您没有该属性的情况下可以使用history.push('/dashboard')。使用<Switch> 和<Route> 设置，您只是在配置应用程序中的哪个路由应该呈现哪个组件，而不是真正根据条件重定向。也许这个 repo 有助于理解重定向选项：github.com/norbitrial/…

标签： reactjs react-router-dom react-router-v4 react-router-redux

【解决方案1】：

简单、干净且可重复使用-

如果该属性不存在，则创建一个重定向到仪表板（或指定的任何路径）的组件，否则它会呈现路由本身。


export const ProtectedRoute = ({comp: Component, redirectTo, path, key}) => {
  const propertyExists = "...";
  
  if (propertyExists) return <Route path={path} component={Component} key={key}></Route>;
  else return <Redirect to={redirectTo || "/dashboard"}/>
};

现在在路线内

<Switch>
<Route path="/dashboard"   component={Dashboard}     key="dashboard" />
<ProtectedRoute path="/projects"    component={UserProjects}  key="userprojects" />
<ProtectedRoute path="/compute/servers" component={ProjectServerList}   key="projectserverlist" />
<ProtectedRoute path="/compute/snapshots"  component={ServerSnapshotList}  key="ServerSnapshotList" />
<ProtectedRoute path="/compute/keypairs"   component={KeypairList}         key="KeypairList" />

【讨论】：

【解决方案2】：

我做了一些修改，希望它是你想要的

 {myproperty ? (
            <Switch>
              <Route path="/dashboard" component={Dashboard} key="dashboard" />
              <Route path="/projects" component={UserProjects} key="userprojects" />
              <Route path="/compute/servers" component={ProjectServerList} key="projectserverlist" />
              <Route path="/compute/snapshots" component={ServerSnapshotList} key="ServerSnapshotList" />
              <Route path="/compute/keypairs" component={KeypairList} key="KeypairList" />
            </Switch>
          ) : (
            <Route  component={Dashboard} key="dashboard" />
          )}

如果“myproperty”有一个值，一切都会正常进行，如果没有，它将呈现 component={Dashboard}

【讨论】：