时间戳

首页 > 解决方案 > 反应路由器重定向到根空白页面

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

问题描述

我可以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_Routerindex.js

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

  document.getElementById('root'),
)

标签： reactjsreact-router-v4

解决方案

意识到Switch即使在使用react developer tools.

在我移动BrowserRouter(as 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>
  )
}

推荐阅读