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的情况下它们又是匹配的。

  • 相关阅读:
    luoguP1829 [国家集训队]Crash的数字表格 / JZPTAB(莫比乌斯反演)
    luoguP1447 [NOI2010]能量采集
    POJ2559 Largest Rectangle in a Histogram (单调栈
    2038: [2009国家集训队]小Z的袜子(hose)
    codeforces 835C Star sky
    HDU1859 最小长方形 (水
    HDU 1754 I Hate It
    HDU 1698 Just a Hook(线段树
    HDU 1394 Minimum Inversion Number(树状数组/归并排序实现
    HDU1166 敌兵布阵(树状数组实现
  • 原文地址:https://www.cnblogs.com/em2464/p/10823648.html
Copyright © 2011-2022 走看看