Question

我是React的新手，在我的项目中，我使用了react-router来定义路由。但是，我有一个相同的路径可以根据条件重定向。我尝试将conditonal运算符设置如下，但dint工作，厌倦if块也是如此。如何基于条件渲染具有相同路径的不同组件。

＆＃13;

var Routes = (
    <Router history={hashHistory}>
        {role === undefined ? (
            <Route path='/' component={Login} />
            ):
            <Route path='/' component={Home}>
                <Route path='category' component={About}/>
                <Route path='input' component={Cate} />
                <Route path='charts' component={Chart}/>
                <Route path='buyerHome' component={customer}/>
            </Route>
        }
    </Router>
);

＆＃13;

Answer 1

您可以使用react-router onEnter挂钩来保护您的路线。

<Route path='/' component={Home} onEnter={requireAuth}>

function requireAuth(nextState, replace) {
  if (!role) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

希望这有帮助。

Answer 2

对于重定向，您可以使用 onEnter

const checkRole = (nextState, replace)=>{
     if(role === undefined) replace('/login')
};

<Route path='/' component={Home} onEnter={checkRole}>
     <Route path='category' component={About}/>
      ...
</Route>
<Route path='/login' component={Login} />

或者您可以使用HOC （高阶组件）来检查角色和其他内容

const CheckRole = Comp  => class extends React.Component{
    componentWillMount(){
        if(role===undefined) hashHistory.replace('/signup');
    }
    render(){
        return <Comp {...this.props}/>;
    }
};

<Route path='/' component={CheckRole(Home)}>
     <Route path='category' component={About}/>
     ...
</Route>
<Route path='/login' component={Login} />

如果你喜欢不同组件的相同路径，在某些条件基础上

<Route path="/" component={role===undefined ? Login : Home} />

如果您使用redux ，则可以使用redux-auth-wrapper。它比onEnter方法有一些优势。

基于Auth的反应路由器重定向

2 个答案: