동적 반작용-라우터 경로

Question

나는 어떤 부분의 상태에 따라 다른 경로를 사용하려면, 그래서 나는 다음과 같은 내놓았다 :

을 내 입력 파일 :

import routes from './routes.js' 

ReactDOM.render(
    <IntlProvider locale={locale} messages={messages[locale]}> 
    <Provider store={store} key='provider'> 
     <div> 
     <Router history={history} routes={routes(store)} /> 
     </div> 
    </Provider> 
    </IntlProvider>, 
    document.getElementById('root') 
) 

경로를. JS :

export default (store) => (
    let isAuthenticated = store.getState().auth.isAuthenticated 

    if(isAuthenticated) { 
    return (
     <Route component={Tool}> 
     <IndexRoute component={Dashboard} /> 
     <Route path="products" component={Products} /> 
     </Route> 
    ) 
    } else { 
    return (
     <Route> 
     <Route component={Site}> 
      <IndexRoute component={Home} /> 
      <Route path="pricing" component={Pricing} /> 
     </Route> 
     <Route component={Portal}> 
      <Route path="login" component={Login} /> 
      <Route path="register" component={Register} /> 
     </Route> 
     </Route> 
    ) 
    } 
) 

이 실제로 refre 경우에만 있지만, 작동 sh 페이지. 홈 구성 요소에서 Dashboard 구성 요소로 전환하지 않습니다. 브라우저 페이지를 새로 고치지 않고 로그인하면 라우트 개체가 처음에는 한 번만 빌드되고 현재 상태는 빌드되지만 변경되지는 않습니다. 상태가 중간 실행을 변경합니다.

또한 동적 경로와 관련하여 https://github.com/ReactTraining/react-router/blob/master/docs/guides/DynamicRouting.md이 발견되었지만 시도한 것처럼 그렇게하기를 기대하지 않았거나 예상하지 못했습니다.

Answer 1

는 사용자에 승인 예컨대 확인하는 기능을 갖는 경로 레벨

<Route name="example" path="/example" component={Example} onEnter={functionToCheckAuthorization()} /> 

에 onEnter 방법을 사용하여

function functionToCheckAuthorization(nextState, replace) { 
    if (!auth.loggedIn()) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

참조 참조하십시오 https://github.com/ReactTraining/react-router/blob/master/examples/auth-flow/app.js

은 또한 참조를 참조하십시오. https://github.com/ReactTraining/react-router/issues/243이