Reactjs에서의 간단한 조건부 라우팅

Reactjs에서의 간단한 조건부 라우팅

조건부 루팅을 구현하는 방법, 즉 일부 조건이 충족되는 경우에만 루팅을 수행해야 합니다.예를 들어 사용자가 올바른 credential을 입력한 경우에만 로그인이 성공하고 사용자가 시작 페이지를 볼 수 있어야 합니다.

만약 우리가 직접 다음과 같은 URL을 방문한다면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;

환영해.js

import React, { Component } from 'react'; 

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

질문에 대한 답변을 돕기 위해 그 경로를 어떻게 차단해야 하는지 물어봐야 할 것 같습니다.위의 예를 살펴보면 "이 페이지를 방문해도 될까요?"라는 질문에 대답할 수 있는 메커니즘은 아직 없습니다.그것은 아마도 에서 나올 것이다.state, redux 또는 사용자가 로그인하고 있는지 여부를 확인하는 기타 수단.

부터react-router그냥 플레인 리액트(제가 좋아하는 부분 중 하나예요!!)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>
   );
  }
}

간단한 해결책으로 파티에 참여하고 싶습니다.

의 컴포넌트 프로포트에서 다음과 같이 조건부 렌더링만 하면 됩니다.

<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 컴포넌트를 렌더링해야 합니다.

다음과 같은 작업을 수행할 수 있습니다.

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

같은 것을 사용합니다.

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

마찬가지로 react-router-dom에서 Import해야 합니다.

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

가장 좋은 방법은 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);
}

이제 루트에서는 이 호크를 사용하여 컴포넌트를 전달할 수 있습니다.

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

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

가장 좋고 간단한 방법은 부울값을 기반으로 상태변수 로그인과 루트를 작성하는 것입니다.설정하는 논리는 당신에게 달려 있습니다.조건에 따른 간단한 라우팅의 예를 보여 줄 수 있습니다.페이지를 배열에 저장하고 지도 기능을 사용하여 다른 경로로 전환합니다.예를 들어, 참고로 Designer Home.js를 삽입했습니다.

---

이것은 나의 앱이다.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> 

    )    
  }
}

---

이것은 나의 Designer Home.js입니다.

import React,{Component} from 'react';

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

인증 상태를 만듭니다. 이를 기반으로 페이지로 이동합니다.그리고 나는 사용했다.rendercomponentRoute.

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;

언급URL : https://stackoverflow.com/questions/48497510/simple-conditional-routing-in-reactjs