react-router4路由

 

指定404页面

指定404页面也非常简单，只需要在路由系统最后使用Route指定404页面的component即可

 

<Switch>
 <Route path="/" exact component={Home}/>
 <Route path="/user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

 重定向

Redirect

<Switch>
 <Route path="/" exact component={Home}/>
 <Route path="/user" component={User}/>
  <Redirect to="/" />
</Switch>

<Redirect> 组件将会始终执行浏览器重定向，但是当它位于 <Switch> 语句中时，只有在其他路由不匹配的情况下，才会渲染重定向组件

 

登录拦截

const islogin=false;
const RouterList = () => (
  <Router >  
      <SystemMenu />    
      <Switch>                   
          <PrivateRoute exact path="/" component={Home}/>
          <LoginRoute exact path="/login" component={Login}/>
          <PrivateRoute exact path="/app" component={App}/>
          <PrivateRoute exact path="/home" component={Home}/>
          <PrivateRoute exact path="/home" component={Home}/>
          <PrivateRoute exact path="/testCount" component={TestCount}/>
          <Redirect to="/" />
          {/*<Route  component={App}/>*/}
      </Switch>            
  </Router>
)

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    islogin ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

const LoginRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    islogin ? (
      <Redirect to={{
        pathname: '/',
        state: { from: props.location }
      }}/>
    ) : (
      <Component {...props}/>
    )
  )}/>
)