React Router的Redirect跳转怎么无效呀？

Question

问题描述

login home和/ 这几个路径单独访问没有问题，用Redirect重定向就不行了，浏览器地址栏有变化，但是页面没有渲染任何内容。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

let loggedIn = true;

function App() {
    return (
        <Router>
            <Switch>
                {!loggedIn && <Redirect to="/login" />}
                <Route path="/login" component={SignIn} />
                <Route path="/home" component={Home} />
                <Route path="/"><Home /></Route>
            </Switch>
        </Router>
    );
}

你期待的结果是什么？实际看到的错误信息又是什么？

没有任何报错，这是怎么回事？

Answer 1

这里有个先后问题, 在跳转到SignIn之前需要先渲染SignIn, 所以结构要调整下

<Switch>
  <Route path='/login' component={SignIn} />
  {!loggedIn && <Redirect to='/login' />}
  <Route path='/home' component={Home} />
  <Route path='/'>
    <Home />
  </Route>
</Switch>

Answer 2

你的 loggedIn 设置为false了吗？

Answer 3

去掉Switch标签就好了，Switch标签只会匹配其中一个，匹配到后就不在往下进行了