React.js中的简单条件路由

Question

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

如果我们直接点击某些网址（例如“ localhost：8080 /
welcome”），不应将其导航到欢迎页面，则仅在登录欢迎页面后才能看到。我怎么能做到这一点，任何人都可以帮助我..谢谢你。

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）。尽最大努力回答“如何确定用户是否已通过身份验证”的问题，并将该机制用作处理路由身份验证的手段。