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