代码之家 › 专栏 › 技术社区 › Sooraj

反应路由器-重定向除一个以外的所有路由

react-router-v4 react-router reactjs

Sooraj · 技术社区 · 6 年前

我正在尝试在React中实现受保护的路由。下面是我的实现

if (isAuth()) {
      routesToRender = (
        <React.Fragment>
          {/* <Redirect exact from="/" to="/dashboard" /> */}
          <Route path="/" exact component={props => <Dashboard {...props} />} />
          <Route path="/dashboard" exact component={props => <Dashboard {...props} />} />
          <Route path="/settings/" exact component={props => <Settings {...props} />} />
        </React.Fragment>
      )
    } else {
      routesToRender = (
        <React.Fragment>
          <Route path="/signup/" exact component={props => <Signup {...props} />} />
          <Route path="/" exact component={props => <Login {...props} />} />
          <Redirect from="*" to="/" />
        </React.Fragment>
      )
    }

如果未通过身份验证,我希望将所有路由重定向到根URL * 我用 <Redirect from="*" to="/" /> 为此。但我也希望能够 /signup .

如何从除一条以外的所有路径重定向?

1 回复 | 直到 6 年前

Shubham Khatri 6 年前

您应该编写一个authroute hoc,而不是编写用于身份验证的硬编码路由,

const AuthRoute = ({component: Component, ...rest}) => {
    if(isAuth) {
        return <Route {...rest} component={Component} />
    }
    return <Redirect to="/" />
}

并使用它

<React.Fragment>
      {/* <Redirect exact from="/" to="/dashboard" /> */}
      <AuthRoute path="/" exact component={props => <Dashboard {...props} />} />
      <AuthRoute path="/dashboard" exact component={props => <Dashboard {...props} />} />
      <AuthRoute path="/settings/" exact component={props => <Settings {...props} />} />
 </React.Fragment>

您不想验证的任何路由都将被记为普通路由。

推荐文章

Evanss · 使用React Router 4对组件内的url更改作出反应?

7 年前

Aman_Kawatra · 渲染同一组件,并在特定管线更改上更改某些状态属性

7 年前

James · 受保护的路由反应路由器4不使用存储在Redux中的身份验证状态

7 年前

Max Wolfen · 为什么在新的react路由器dom<Redirect/>中没有在setTimout内触发?

7 年前

Nicolas Albarracin · Web包和React浏览器路由器

7 年前

Prasaad Patil · 如何显示传递给组件的参数,以及如何在reactjs中为组件提供可选参数?

7 年前

RomaValcer · 隐式传递路由器历史记录

7 年前

forJ · 如何使用react路由器4配置专用路由

7 年前

Mesmerize86 · 嵌套React路由器v4

7 年前

Velidan · React Router v4-使用更改的默认路由进行动态配置

7 年前