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

  • 相关阅读:
    对用户控件(ascx)属性(property)赋值
    The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
    图片淡入淡出切换效果
    在用户控件(ASCX)创建用户控件(ASCX)
    Login failed for user 'xxx'
    一些较好的书
    儿子购买的书
    怀念以前做网管的日子
    Linux下selinux简单梳理
    Rsync同步时删除多余文件 [附:删除大量文件方法的效率对比]
  • 原文地址:https://www.cnblogs.com/em2464/p/10823648.html
Copyright © 2011-2022 走看看