Question

我想做类似的事情：

<Route>
    <MyComponent someCondition={true/false}>
        <Route1 />
        ....
    </MyComponent>
</Route

处理一些条件渲染。但是，<MyComponent />似乎没有在渲染时挂载。

我的问题是：我们可以在<Route>中包含正常的反应成分吗？如果没有，是否有更好的方法来处理条件路由？

Answer 1

条件路由到底是什么意思？假设您的意思是不让用户在未经过身份验证的情况下点击路线，则可以使用react-router的onEnter hooks。您可以创建一个没有<Route>道具的父component，只处理路由检查。我在this example中使用了一些简单的onEnter检查。

// onEnter hooks for login and home page to redirect if necessary
const checkAuth = function (nextState, replace) {
  const { user } = store.getState()
  if (isEmpty(user)) {
    replace('/')
  }
}
const checkSkipAuth = function (nextState, replace) {
  const { user } = store.getState()
  if (!isEmpty(user)) {
    replace('/home')
  }
}

var Index = () => {
  return (
    <Provider store={store}>
      <Router history={history}>
        <Route path='/' component={Container}>
          <IndexRoute component={Login} onEnter={checkSkipAuth} />
          <Route path='home' component={Home} onEnter={checkAuth} />
          <Route path='*' component={NoMatch} />
        </Route>
      </Router>
    </Provider>
  )
}

我们可以在<route>中包含正常的反应成分吗？

1 个答案: