web-dev-qa-db-ja.com

Reactjsの単純な条件付きルーティング

条件付きルーティングの作成方法。一部の条件が満たされた場合にのみ、ルーティングのみが発生します。たとえば、ユーザーが正しい資格情報を入力した場合にのみログインが成功し、ユーザーはウェルカムページを表示できる必要があります。

ログインウェルカムページが表示された後にのみ、ウェルカムページに移動しない「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;
reactjsreact-routerreact-reduxreact-router-v4react-router-dom
13
Srikanth Gowda

あなたの質問に答えるのを助けるために、あなたはhowルートがブロックされるべきであることも尋ねる必要があるかもしれないと思います。上記の例を見てみると、「このページにアクセスできるか」という質問に答えるのに役立つメカニズムはまだありません。これは、state、redux、またはユーザーがログインしているかどうかを判断するその他の手段から生じる可能性があります。

react-routerは単なるReact（私のお気に入りのパーツの1つです）なので、条件付きで表示するすべてのツールを利用できますanyの一部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>
    );
  }
}

これを達成するための私のお気に入りの方法の1つは、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から来る必要はありません）。 「ユーザーが認証されているかどうかをどのように判断するか」という質問に最善を尽くし、そのメカニズムをルート認証の処理手段として使用します。

49
jerelmiller

そのためには、アプリ全体を2つの部分、通常はアクセス可能な部分と保護された部分に分割する必要があります。保護された部分は、ログインに成功した後にのみアクセスできます。

その機能を実現するには、保護された部分のラッパーを作成し、そのルートを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 Component（ユーザーがログインしているかどうかを維持するために何らかの方法を使用していると想定しているため、if条件に適切なチェックを入れます）：

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>
   );
  }
}
4
Mayank Shukla

次のようなことができます：

 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";
2
learner

最善の方法は、HOCを作成することです。 Reduxストアで認証状態を維持していることを考慮してください。または、独自の変数で確認できます。

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)} />
1
Shrey Kejriwal

react-router-domからRedirectを使用できます。

ここに良い例があります- https://scotch.io/courses/using-react-router-4/authentication-with-redirect

0
Rishikesh Dhokare