代码之家 › 专栏 › 技术社区 › resting

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

react-router-v4 reactjs

resting · 技术社区 · 6 年前

我看得见 Login 中的组件 / .
Home 中的组件 /home (登录时)。

但当我进入 /家 在没有登录的情况下,我被重定向到 ,但显示的是空白页。

为什么不给我看 登录

这是你的答案 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'),
)

1 回复 | 直到 6 年前

resting 6 年前

意识到 Switch 即使路由在使用重定向时发生了更改,案例也没有更新 react developer tools .

我搬家后终于能用了 BrowserRouter Router )仅包装 开关 案例。

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>
  )
}

推荐文章