는 라우터 V4 방법을 허용 지정하려면 루트 반작용

Question

이 내 응용 프로그램에서 사용할 경로입니다

/topic/whatever 

어디에서 할 수 있습니다

/ 
/topic/development 
/topic/database 
/topic/security 
/pages/:page (:page can only be a number) 

그들이 뭔가를 방문 할 때 나는 누구나 Not Found을 표시하는 문제가이 사용자에게 허용되는 경로를 지정합니까?

Answer 1

<Switch/> 내에는 path이없는 성분을 갖는다.

<Switch> 
    <Route path="/" exact component={Home}/> 
    <Route path="/will-match" component={WillMatch}/> 
    ... More paths here 
    <Route component={NoMatch}/> 
    </Switch> 

Answer 2

난 당신이 언급 할 생각 "루트는 누구나 사용할 수 있습니다?"앱에서 인증의 일부 계층이 있음을 의미한다.

const renderMergedProps = (component, ...rest) => { 
    const finalProps = Object.assign({}, ...rest); 
    return (
    React.createElement(component, finalProps) 
); 
}; 

const PrivateRoute = ({ user, component, redirectTo, ...rest }) => { 
    return (
    <Route {...rest} render={routeProps => { 
     return user.logged ? (
     renderMergedProps(component, routeProps, rest) 
    ) : (
      <Redirect to={{ 
      pathname: redirectTo, 
      state: { from: routeProps.location } 
      }} /> 
     ); 
    }} /> 
); 
}; 

이제 수 :

{ 
    user: undefined, 
    logged: false 
} 

은 당신이 할 수있는 것은 무엇인가이 속성의 상태를 확인하기 위해 경로를 장식입니다 :

은 당신이 당신의 초기 상태 (Initial)에 말할 수 있습니다 필요한 소도시를 통과하는 경로와 privateroutes를 정의하고, 필요한 소품을 전달합니다.

<Route exact path="/" render={() => (<Redirect to="/dashboard" />)} /> 
<PrivateRoute path="/dashboard" component={App} user={user} redirectTo="/login"/> 

그런 다음 최상의 sol 주 변화에 반응하는 것은 희박한 방식으로 이것을 구현할 것입니다. 필요한 경우 더 이상 알 수 없습니다.