zoukankan      html  css  js  c++  java
  • react路由重定向时 exact的作用 报错Warning: You tried to redirect to the same route you're currently on: "/index"

    //Redirect重定向
    class RouterIndex extends Component{
        render(){
            return (
                <Switch>
                    <Route path="/" render={()=>(
                        <Redirect to="/index" />
                        
                    )} />
                    
                    <Route path="/index" component={Index} />
                    <Route path="/book" component={Book} />
                    <Route path="/user" component={User} />
                    <Route path="/about" component={About} />
                    <Route path="/details" component={Details} />
    
                </Switch>
            )
        }
    }
    export default RouterIndex;

      报错Warning: You tried to redirect to the same route you're currently on: "/index",修改路径时i无法显示页面内容

    在需要重定向的组件里添加exact就可解决

    //Redirect重定向
    class RouterIndex extends Component{
        render(){
            return (
                <Switch>
                    <Route exact path="/" render={()=>(
                        <Redirect to="/index" />
                        
                    )} />
                    
                    <Route path="/index" component={Index} />
                    <Route path="/book" component={Book} />
                    <Route path="/user" component={User} />
                    <Route path="/about" component={About} />
                    <Route path="/details" component={Details} />
    
                </Switch>
            )
        }
    }
    export default RouterIndex;

    解析:

    <Route>组件有如下属性:

    path (striing):路由匹配路径。(没有path属性的Route总是会匹配);

    exact  (boolean):为true时,则要求路径与location.pathname必须完全匹配

    strict(boolean):为true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname

    1、exact

    exact是Route下的一条属性,一般而言,react路由会匹配所有匹配到的路由组件,exact能够使得路由的匹配更严格一些。

    exact为true时表示严格匹配,为false时为正常匹配。

    如果exact为true时,'/index'和‘/’是不匹配的,但是在false的情况下它们又是匹配的。

  • 相关阅读:
    JAVA面试基础
    扔硬币问题
    随机数生成随机数
    囚犯猜帽子问题
    十道智力题(三)
    十道智力题(二)
    十道智力题(一)
    lintcode:排颜色 II
    机器学习中的几个常见概念(持续更新中......)
    如何打印一棵树(Java)
  • 原文地址:https://www.cnblogs.com/em2464/p/10823648.html
Copyright © 2011-2022 走看看