如何实现条件路由,即当且仅当某些条件满足时,应该进行路由.

如果我们不直接点击localhost:8080/welcome个网址,欢迎点击.欢迎页面只应在登录后显示.

如何做到这一点,有人能帮我吗?

应用程序.js

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

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

头球.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;

所有路由.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;

欢迎js

import React, { Component } from 'react'; 

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

推荐答案

为了帮助回答你的问题,我想你可能还需要问how,路由应该被封锁.通过上面的例子来看,你还没有一个机制来帮助回答"我应该能够访问这个页面吗"的问题.这可能来自state、redux或其他一些确定用户是否登录的方法.

因为react-router只是简单的react (我最喜欢的部分之一!!)你拥有所有可用的工具,可以有条件地显示React应用程序的any部分.

这里有几个例子可以说明你是如何做到这一点的(这绝非详尽无遗.要有创意!这完全取决于你的需求和你使用的工具)

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).尽最大努力回答"如何确定用户是否经过身份验证"的问题,并使用该机制作为处理路由身份验证的手段.

Reactjs相关问答推荐

使用useEffect挂钩获取数据

无法使用#13;或br将新行设置为文本区域'"&"<>

为什么我的标签在Redux API中不能正常工作?

Next.js-图像组件加载问题

是否将样式应用于父悬停(框架运动)上的子元素?

无法从正在使用Reaction的Electron 商务store 项目中的购物车中删除项目

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

Reaction Ploly:如何在多个子情节中共享zoom 状态

FireBase Reaction Native-在呈现视图之前等待响应

折叠并重新打开react 手风琴将重置内部状态

我如何使用 React toastify (Promise) toast 和邮箱 js

Next.js `getLayout` 函数没有被调用

提前输入错误:选项类型上不存在属性名称

在 monorepo 内的工作区或库之间共享 redux 状态

useEffect 渲染没有依赖数组的组件

在 React 中将路径与查询变量匹配

为什么接受 useState 返回的函数的 setter 在使用 React 的单个调用中执行两次?

当从数组中删除数据时,UseEffect 不会重新渲染,仅在添加数据时才会重新渲染

网格项不缩小以适应包含的可滚动列表

如何在按钮左下角制作 Material UI 菜单下拉菜单