路由的基本使用
1.明确好界面中的导航区、展示区2.导航区的a标签改为Link标签<Link to="/xxxxx">Demo</Link>3.展示区写Route标签进行路径的匹配<Route path='/xxxx' component={Demo}/>4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
文章目录
- 路由的基本使用
- 一、路由组件与一般组件区别
- 二、Link的使用
- 三、Switch的使用
- 四、精准匹配和模糊匹配(exact)
- 五、Redirect的使用
- 六、解决多级路径刷新页面样式丢失的问题
- 七、向路由组件传递参数
- 八、编程式路由导航
- 九 、BrowserRouter与HashRouter的区别
一、路由组件与一般组件区别
1.写法不同：一般组件：<Demo/>路由组件：<Route path="/demo" component={
Demo}/>2.存放位置不同：一般组件：components路由组件：pages3.接收到的props不同：一般组件：写组件标签时传递了什么，就能收到什么路由组件：接收到三个固定的属性history:go: ? go(n)goBack: ? goBack()goForward: ? goForward()push: ? push(path, state)replace: ? replace(path, state)location:pathname: "/about"search: ""state: undefinedmatch:params: {