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之后,将不会再想下继续匹配,提高了程序效率。