Switch
- V6.0以上的版本中Routes已经将Switch取代
- 通常情况下,path和component是一一对应关系
- Switch可以提高路由匹配效率(单一匹配)
路由的基本使用
- 明确好界面中的导航区、展示区
- 导航区的a标签改为Link标签
<Link to='/xxxxx'>Demo</Link>//无高亮状态切换
<NavLink to='/xxxxx'/>About</NavLink>//中间的标签元素可以使用<NavLink>中的children代替
<NavLink to='/xxxxx'/ children='About'>//会切换高亮状态,默认增加会在className后增加active
- 展示区写Route标签进行路径的匹配(新版本需要使用Routes进行包裹并且引入的组件需要使用element,否则会展示空内容)
<Route path='/xxxx' component={Demo}/>//老版本V5
<Routes>
<Route path='/xxxx' element={Demo}/>//新版本V6
</Routes>
App的最外侧包裹了一个BrowserRouter或HashRouter