Reactjs中的简单条件路由

Question

如何进行条件路由,当且仅当某些条件满足时才会发生路由.例如,当且仅当用户输入正确的凭证时,登录才能成功,用户应该能够看到欢迎页面.

如果我们直接点击一些像"localhost:8080/welcome"这样不应该导航到欢迎页面的URL,只有在登录后才能看到欢迎页面.我怎么能做到这一点,任何人都可以帮助我..谢谢你.

App.js

import React, { Component } from 'react';
import Header from './Header';

class App extends Component{
  render(){
   return(
     <div>
       <Header />
     </div>
   );
  }
}
export default App;

Header.js

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import Login from './Login';
import SignUp from './SignUp';

class Header extends Component{
render(){
  return(
    <div>
    <nav class="navbar navbar-default">
     <div class="container-fluid">
     <ul class="nav navbar-nav">
      <li><Link to={Login}>Login</Link></li>
      <li><Link to={Login}>SignUp</Link></li>
    </ul>
    </div>
    </nav>

    </div>
   );
 } 
}

export default Header;

AllRoutes.js

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Login from './Login';
import SignUp from './SignUp';
import Welcome from './Welcome';

class AllRoutes extends Component{
 render(){
   return(
     <Switch> 
       <Route exact path="/login" component={Login} />
       <Route exact path="/signup" component={SignUp} />
       <Route exact path="/Welcome" component={Welcome} />
     </Switch>
   );
  }
 }
 export default AllRoutes;

Welcome.js

import React, { Component } from 'react'; 

class Welcome extends Component{
render(){
 return(
  <div>
   <h2>Welcome to MainPage..</h2>
  </div>
  );
 }
}
export default Welcome;

Answer 1

为了帮助回答您的问题,我想您可能还需要询问该路由应该如何被阻止.通过上面的示例,您还没有一种机制可以帮助回答"我应该能够访问此页面"的问题.这可能来自state,redux或其他一些确定用户是否已登录的方法.

由于react-router只是简单的React(我最喜欢的部分之一!!),您可以使用所有可以有条件地显示React应用程序任何部分的工具.

以下是一些如何实现这一目标的例子(绝不是详尽无遗的.要有创意!这一切都取决于您的要求和您使用的工具)

class AllRoutes extends Component{
  render(){
    return(
      <Switch> 
        <Route exact path="/login" component={Login} />
        <Route exact path="/signup" component={SignUp} />
        { this.state.authenticated && 
          <Route exact path="/Welcome" component={Welcome} />
        }
      </Switch>
    );
  }
}

我最喜欢的一种方法是创建一个ProtectedRoute组件

class ProtectedRoute extends Component {
  render() {
    const { component: Component, ...props } = this.props

    return (
      <Route 
        {...props} 
        render={props => (
          this.state.authenticated ?
            <Component {...props} /> :
            <Redirect to='/login' />
        )} 
      />
    )
  }
}

class AllRoutes extends Component {
  render() {
    return (
      <Switch>
        <Route path='/login' component={Login} />
        <ProtectedRoute path='/welcome' component={Welcome} />
      </Switch>
    )
  }
}

虽然我没有包含任何特定的逻辑来state.authenticated设置,但这可能来自任何地方(绝不是它需要来自state).尽力回答"我如何确定用户是否经过身份验证"的问题,并使用该机制作为处理路由身份验证的方法.

Answer 2

我想用简单的解决方案加入聚会。

只需在组件 prop 中进行条件渲染，如下所示：

<Router>
  <Navigation />
  <Switch>
      <Route
         exact
         path="/"
         component={
          loading
           ? () => <div>Loading posts...</div>
         : () => <Home posts={posts} />
        }
      />
    <Route path="/login" component={Login} />
  </Switch>
</Router>

在这里，我尝试从 api 获取一些数据，当它获取（加载）应该为 false 并呈现 Home 组件时。

Answer 3

为此，您需要将整个应用程序分为两部分，通常是可访问的部分和受保护的部分。成功登录后，才能访问受保护的部分。

要实现该功能，请创建受保护零件的包装，并使用定义其路线path='/'，并将条件放入其中。所有受保护的路由都应在该包装器组件内定义。如果有人尝试不登录而访问这些路由，则包装程序会将它们重定向到登录页面。

像这样：

class AllRoutes extends Component{
 render(){
   return(
     <Switch> 
       <Route exact path="/login" component={Login} />
       <Route exact path="/signup" component={SignUp} />
       <Route path="/" component={AppWrapper} />
     </Switch>
   );
  }
 }

AppWrapper 组件（假设您正在使用某种方式来维护用户是否已登录，因此请在条件是否正确的情况下进行检查）：

import { Redirect } from 'react-router-dom'

class AppWrapper extends Component{
  render(){

  if(/*not login*/)
    return <Redirect to="/login" />

   return(
     <div>
       App wrapper
       <Route path='/Welcome' component={Welcome} />
     </div>
   );
  }
}