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

  • 相关阅读:
    iOS启动项目(二)引入第三方库
    Swift技巧(九)CGImage To CVPixelBuffer
    Swift技巧(四)设置照片尺寸和格式
    Swift技巧(十) Protocol 的灵活使用
    Alamofire5.0.0 以上报错
    Swift技巧(八)CVPixelBuffer To CGImage
    Swift技巧(十一)重写运算符
    Swift技巧(五)设置圆角的代码
    Swift技巧(七)重识 Array
    Swift技巧(六)设置按钮状态并更改
  • 原文地址:https://www.cnblogs.com/em2464/p/10823648.html
Copyright © 2011-2022 走看看