리액트 라우터를 사용하여 프로그래밍 방식으로 탐색

리액트 라우터를 사용하여 프로그래밍 방식으로 탐색

사용자가 그렇지 않은지 확인하는 어플리케이션을 개발 중입니다.loggedIn로그인 폼을 표시해야 합니다.그렇지 않으면dispatch한 사람action루트를 변경하고 다른 컴포넌트를 로드합니다.코드는 다음과 같습니다.

render() {
    if (isLoggedIn) {
        // dispatch an action to change the route
    }
    // return login component
    <Login />
}

내부 상태를 변경할 수 없기 때문에 어떻게 해야 합니까?render기능.

사용하고 있는 것을 생각하면react-router v4

컴포넌트 사용방법withRouter및 사용history.push소품부터 루트를 바꿀 수 있습니다.를 활용할 필요가 있습니다.withRouter컴포넌트가 수신하지 않는 경우에만Router소품, 이것은 구성요소가 라우터에 의해 렌더링된 구성요소의 중첩된 하위 구성요소이고 사용자가 라우터 소품을 전달하지 않은 경우 또는 구성요소가 라우터에 전혀 연결되어 있지 않고 경로와 별도의 구성요소로 렌더링된 경우에 발생할 수 있습니다.

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     componenDidMount() {
        // get isLoggedIn from localStorage or API call
        if (isLoggedIn) {
             // dispatch an action to change the route
             this.props.history.push('/home');
        }
     }
     render() {
         // return login component
         return <Login />
    }
}


export default withRouter(App);

중요사항

사용하시는 경우withRouter에 의해 업데이트가 차단되지 않도록 하려면shouldComponentUpdate, 중요한 것은withRouter를 구현하는 컴포넌트를 랩합니다.shouldComponentUpdate예를 들어 Redx를 사용하는 경우:

// 이거 돌아간다shouldComponentUpdate

withRouter(connect(...)(MyComponent))

// 이것은 그렇지 않습니다.

connect(...)(withRouter(MyComponent))

또는 Redirect를 사용할 수도 있습니다.

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     render() {
         if(isLoggedIn) {
              return <Redirect to="/home"/>
         }
         // return login component
         return <Login />
    }
}

와 함께react-router v2 or react-router v3, 를 사용할 수 있습니다.context루트를 동적으로 변경하다

class App extends React.Component {
     ...
     render() {
         if (isLoggedIn) {
             // dispatch an action to change the route
             this.context.router.push('/home');
         }
         // return login component
         return <Login />
    }
}

App.contextTypes = {
    router: React.PropTypes.object.isRequired
}
export default App;

또는 사용

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

리액트 라우터 버전4의 경우:

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'

const Example = () => (

  if (isLoggedIn) {
    <OtherComponent />

  } else {

    <Router>
      <Redirect push to="/login" />
      <Route path="/login" component={Login}/>
    </Router>

  }
)

const Login = () => (
    <h1>Form Components</h1>
    ...
)

export default Example;

또 다른 대안은 Thunk 스타일의 비동기 액션(부작용이 안전하거나 허용됨)을 사용하여 이를 처리하는 것입니다.

Thunk를 사용하면 같은 것을 주입할 수 있습니다.history양쪽에 반대하다<Router>컴포넌트 및 Thunk 액션 사용thunk.withExtraArgument, 다음과 같이 합니다.

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'
import { createBrowserHistory } from "history"
import { applyMiddleware, createStore } from "redux"
import thunk from "redux-thunk"

const history = createBrowserHistory()

const middlewares = applyMiddleware(thunk.withExtraArgument({history}))
const store = createStore(appReducer, middlewares)

render(
  <Provider store={store}
    <Router history={history}>
      <Route path="*" component={CatchAll} />
    </Router
  </Provider>,
appDiv)

그러면 액션 크리에이터에서history이 인스턴스는 ReactRouter와 함께 사용해도 안전하므로 로그인하지 않은 경우 일반 Redux 이벤트를 트리거할 수 있습니다.

// meanwhile... in action-creators.js
export const notLoggedIn = () => {
  return (dispatch, getState, {history}) => {
    history.push(`/login`)
  }
}

또 하나의 장점은 URL이 다루기 쉬워졌기 때문에 쿼리 문자열 등에 리다이렉트 정보를 넣을 수 있다는 것입니다.

Render 메서드에서 이 검사를 계속 수행해 볼 수 있지만 문제가 발생할 경우 에서 수행하는 것을 고려해 보십시오.componentDidMount또는 라이프 사이클의 다른 부분(Stateless Functional Components를 계속 사용하고 싶은 것도 이해하지만)

Redux를 계속 사용할 수 있습니다.mapDispatchToProps작용 생성기를 콤프턴트에 주입하여 구성 요소가 여전히 Redx에 느슨하게 연결되도록 합니다.

이건 내 핸들이야loggedIn.react-router v4

PrivateRoute는 입력이 허용됩니다.path사용자가 로그되어 있는 경우토큰 입력 및 저장처localStorge

    function PrivateRoute({ component: Component, ...rest }) {
     return (
        <Route
          {...rest}
          render={props => (localStorage.token) ? <Component {...props} /> : (
            <Redirect
              to={{
                pathname: '/signin',
                state: { from: props.location },
              }}
            />
          )
          }
        />
      );
    }

여기에서 앱의 모든 경로 정의

export default (
  <main>
    <Switch>
      <Route exact path="/signin" component={SignIn} />
      <Route exact path="/signup" component={SignUp} />
      <PrivateRoute path="/" component={Home} />
    </Switch>
  </main>
);

react-router v4에서 이 기능을 구현하는 데 문제가 있는 사용자.다음은 리액트 앱을 프로그래밍 방식으로 탐색하기 위한 작업 솔루션입니다.

history.disclosing

import createHistory from 'history/createBrowserHistory'

export default createHistory()

App.js 또는 Route.jsx.라우터에 이력을 소품으로 전달합니다.

import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

하시면 됩니다.push()네비게이트 할 수 있습니다.

import history from './history' 

...

render() {
     if (isLoggedIn) {
         history.push('/test') // this should change the url and re-render Test component
     }
     // return login component
     <Login />
}

모두 이 코멘트 덕분입니다.https://github.com/ReactTraining/react-router/issues/3498#issuecomment-301057248

render(){ 

    return (
        <div>  
            { this.props.redirect ? <Redirect to="/" /> :'' } 
            <div>
                add here component codes
            </div>
        </div>
    );
} 

connected-timeout-https://github.com/supasate/connected-react-router을 사용하면 리듀서/액션에서도 네비게이션을 할 수 있습니다.문서화되어 있어 설정이 용이합니다.

사용할 수 있었습니다.history상태 비저장 기능 컴포넌트 내에서 Router와 함께 다음 방법으로 사용합니다(typescript 경고를 무시해야 함).

import { withRouter } from 'react-router-dom';

...

type Props = { myProp: boolean };

// @ts-ignore
export const MyComponent: FC<Props> = withRouter(({ myProp, history }) => {

...

})

import { useNavigate } from "react-router-dom"; //with v6

export default function Component() {
  const navigate = useNavigate();
  navigate.push('/path');
}

리액트 라우터 돔 버전6의 내비게이션 훅을 사용하여 이 문제를 해결했습니다.

언급URL : https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router