Простая условная маршрутизация в Reactjs

Чтобы помочь ответить на ваш вопрос, я думаю, вам также может понадобиться спросить, как этот маршрут должен быть заблокирован. Просматривая пример выше, у вас еще нет механизма, помогающего ответить на вопрос «могу ли я посетить эту страницу». Это может произойти из-за state, избыточности или какого-либо другого средства определения, вошел ли пользователь в систему.

Поскольку 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). Сделайте все возможное, чтобы ответить на вопрос «как определить, аутентифицирован ли пользователь» и используйте этот механизм в качестве средства обработки аутентификации маршрута.

Для этого вам нужно разбить все приложение на две части, обычно доступную и защищенную часть. Защищенная часть будет доступна только после успешного входа в систему.

Чтобы реализовать эту функциональность, создайте оболочку защищенной части, определите ее маршруты с помощью 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>
   );
  }
}

Я хотел бы присоединиться к вечеринке с простым решением.

Просто условный рендеринг в компоненте prop следующим образом:

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

Здесь я пытаюсь получить некоторые данные из API, когда он извлекается (загрузка) должен быть ложным и отображает компонент Home.

Лучший способ — создать HOC. Учитывая, что вы поддерживаете состояние аутентификации в своем хранилище избыточности. Или вы можете проверить свою собственную переменную.

Создайте файл requireAuth.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default function(ComposedComponent) {
  class Authentication extends Component {
    static contextTypes = {
      router: React.PropTypes.object
    }

    componentWillMount() {
      if (!this.props.authenticated) {
        this.context.router.push('/');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.push('/');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(Authentication);
}

Теперь в маршрутах вы можете использовать этот hoc и передать компонент.

import RequireAuth from './requireAuth';
...

<Route exact path="/Welcome" component={RequireAuth(Welcome)} />

Вы можете сделать что-то вроде:

 let redirectToUrl;
      if ( not logged in ) //check condition
      {
        redirectToUrl = <Redirect to={loginPage}/>;
      }

и используйте то же самое:

  <Router>
     <div>
      {redirectToUrl}
       <Switch>
       <Route />
        </switch>
       </div>
</Router>

Для того же вам нужно импортировать из react-router-dom:

import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Redirect,
  Link,
  Switch
} from "react-router-dom";

Лучшее и простое, что вы можете сделать, это создать вход и маршрут переменной состояния на основе логических значений. логика установки зависит от вас. я могу показать пример простой маршрутизации на основе условия. Я храню свои страницы в массиве и использую функцию карты для переключения на разные маршруты. Для примера я вставил свой DesignerHome.js для справки.

Это мой App.js

import React,{Component} from 'react';
import{BrowserRouter as Router,Switch,Route,Redirect,}   from 'react-router-dom'
import MainHome from './MainHome'
import DesignerHome from './designer/DesignerHome'

export default class App extends Component{
  constructor(){
    super()
    this.state={
      login : true,
      r_page :[
        {
          path :'/designerhome',
          component : DesignerHome,
        },]
      }    
    } 
  render(){  
    return(      
      <Router>
        <Switch >  
          <Route path='/' exact component={MainHome}/>            
          {this.state.r_page.map((item , i)=>(this.state.login?
<Route exact {...item}/> :  <Redirect to="/" /> ))}
        </Switch>        
      </Router> 

    )    
  }
}

Это мой DesignerHome.js

import React,{Component} from 'react';

export default class DesignerHome extends Component{
  render(){
    return(
        <div>
            designer home
        </div>
    )
  }
}

создать состояние для аутентификации. на основе этого перейдите на страницу. Также я использовал render вместо component в Route.

import React, { Fragment, useState, useEffect } from "react";
import Dashboard from "./components/Dashboard";
import Login from "./components/Login";
import Register from "./components/Register";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const setAuth = (boolean) => {
    setIsAuthenticated(boolean);
  };

  
  useEffect(() => {
    isAuth(); // to be implemented
  }, []);

  return (
    <Fragment>
      <Router>
        <div className="container">
          <NavigationCard />
          <Switch>
            <Route
              exact
              path="/login"
              render={(props) =>
                !isAuthenticated ? (
                  <Login {...props} setAuth={setAuth} />
                ) : (
                  <Redirect to="/dashboard" />
                )
              }
            />
            <Route
              exact
              path="/register"
              render={(props) =>
                !isAuthenticated ? (
                  <Register {...props} setAuth={setAuth} />
                ) : (
                  <Redirect to="/login" />
                )
              }
            />
            <Route
              exact
              path="/dashboard"
              render={(props) =>
                isAuthenticated ? (
                  <Dashboard {...props} setAuth={setAuth} />
                ) : (
                  <Redirect to="/login" />
                )
              }
            />
          </Switch>
        </div>
      </Router>
    </Fragment>
  );
}

export default App;