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

  • 相关阅读:
    c#中判断对象为空的几种方式(字符串等)
    log4net示例3控制台、windows事件
    c#中如何截取Windows消息来触发自定义事件
    向ArcGIS的ToolBarControl中添加任意的windows组建的方法
    log4net示例1最简单的回滚文件记录日志程序(时间)
    Qt 定时器实现循环
    把 MPP Sample 编译成动态库
    Linux Shell 常用编程语法
    VSCode 调试
    Hisi 使用GDB调试(直接调试)
  • 原文地址:https://www.cnblogs.com/em2464/p/10823648.html
Copyright © 2011-2022 走看看