Question

我可以在Login中看到/组件。
我可以在Home中看到/home组件（登录后）。

但是当我不登录而访问/home时，我被重定向到/，但是它显示空白页。

为什么没有显示Login组件？

这是我使用的ProtectedRoute组件：

const ProtectedRoute = ({component: Component, isAuth, ...rest}) => {
  if (Cookies.get('token')) {
    isAuth = true
  }
  return <Route {...rest} render={props => (isAuth ? <Component {...props} /> : <Redirect exact to="/" />)} />
}

这是我在App.js的路线：

render() {
  return (
    <div className={styles.App}>
      <Switch>
        <Route exact path="/" component={Login} />
        <ProtectedRoute path="/home" component={Home} isAuth={this.props.auth} />
        <Route render={() => <h1>Not found</h1>} />
      </Switch>
    </div>
  )
}

在BrowserRouter中，Router为index.js：

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,

  document.getElementById('root'),
)

Answer 1

意识到Switch的情况没有更新，即使使用react developer tools重定向时路由确实发生了变化。

在我将BrowserRouter（作为Router）移动为仅包裹Switch的情况后，终于使它工作了。

render() {
  return (
    <div className={styles.App}>
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <ProtectedRoute path="/home" component={Home} />
          <Route render={() => <h1>Not found</h1>} />
        </Switch>
      </Router>
    </div>
  )
}

反应路由器重定向到根空白页

1 个答案: