问答

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

作者:admin 2021-10-12 我要评论

问题描述 login home和/ 这几个路径单独访问没有问题,用Redirect重定向就不行了,浏览器地址栏有变化,但是页面没有渲染任何内容。 相关代码 // 请把代码文本粘...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

问题描述

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

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

没有任何报错,这是怎么回事?

###

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

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

你的 loggedIn 设置为false了吗?

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • React Router的Redirect跳转怎么无效呀

    React Router的Redirect跳转怎么无效呀

  • creat-react-app为啥先引入的css会被后

    creat-react-app为啥先引入的css会被后

  • php 5个数字 3个3个一组 能重复使用 但

    php 5个数字 3个3个一组 能重复使用 但

  • js中的this指向问题

    js中的this指向问题

腾讯云代理商
海外云服务器