1.不加Switch的代码
import React, { Component } from "react" ;
import Div1 from "./components/div1"
import Div2 from "./components/div2"
import Page1 from "./pages/page1" ;
import Page2 from "./pages/page2" ;
import { Link, BrowserRouter, Route, NavLink } from "react-router-dom" ;
export default class App extends Component {
render ( ) {
return (
< div>
< BrowserRouter>
< NavLink activeClassName= "acc" to= "/a" >
a
< / NavLink>
< NavLink activeClassName= "acc" to= "/b" >
b
< / NavLink>
< Route path= "/a" component= { Page1} / >
< Route path= "/b" component= { Page2} / >
< Route path= "/b" component= { Page1} / >
< / BrowserRouter>
< Div1> 123456789 / Div1< / Div1>
< / div>
) ;
}
}
如果没有Switch组件,当一个path匹配到多个component时,会渲染出多个组件。一个路径在匹配到了对应的component之后,还会接着向下匹配 ,会大大的影响效率。
2.加了Switch组件之后
import React, { Component } from "react" ;
import Div1 from "./components/div1" ;
import Div2 from "./components/div2" ;
import Page1 from "./pages/page1" ;
import Page2 from "./pages/page2" ;
import { Link, BrowserRouter, Route, NavLink, Switch } from "react-router-dom" ;
export default class App extends Component {
render ( ) {
return (
< div>
< BrowserRouter>
< NavLink activeClassName= "acc" to= "/a" >
a
< / NavLink>
< NavLink activeClassName= "acc" to= "/b" >
b
< / NavLink>
< Switch>
< Route path= "/a" component= { Page1} / >
< Route path= "/b" component= { Page2} / >
< Route path= "/b" component= { Page1} / >
< / Switch>
< / BrowserRouter>
< Div1> 123456789 / Div1< / Div1>
< / div>
) ;
}
}
将Route组件包裹在Switch组件之中,当path匹配到一个component之后,将不会再想下继续匹配,提高了程序效率。