React-Router-基本使用
原创
什么是路由
路由维护了 URL 地址和组件的映射关系, 通过这个映射关系, 我们就可以根据不同的 URL 地址，去渲染不同的组件。
React 中使用路由
- 安装 react-router
npm install react-router-dom通过指定监听模式:
- BrowserRouter history模式：http://www.it6666.top/home
- HashRouter hash模式：http://www.it6666.top/#/home
- 通过
Link修改路由 URL 地址 - 通过
Route匹配路由地址
BrowserRouter 和 HashRouter 的作用：
- 指定路由的监听模式 history模式 / hash模式
- history 模式：http://www.it6666.top/home
- hash：模式：http://www.it6666.top/#/home
Link 的作用：
- 用于修改 URL 的资源地址
Route 的作用：
- 用于维护 URL 和组件之间的关系
- Route 是一个占用组件, 将来它会根据匹配到的资源地址渲染对应的组件
案例
需求，界面上有两个按钮, 点击不同按钮显示不同组件：
在看如上的这个特性之前首先降低一下 React 的版本，这里博主介绍的不是 React 最新版本的语法，关于 React 后面更新的版本后面在更新，运行如下执行：
npm install --save react@16.12.0 react-dom@16.12.0更改 index.js:
import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root'));App.js:
import React from 'react';
import Home from './components/Home'
import About from './components/About'
import {BrowserRouter, HashRouter, Link, Route, Routes} from 'react-router-dom';
class App extends React.PureComponent {
render() {
return (
<div>
<HashRouter>
<Link to={'/home'}>Home</Link>
<Link to={'/about'}>About</Link>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="home" element={<Home/>}/>
<Route path="about" element={<About/>}/>
</Routes>
</HashRouter>
</div>
)
}
}
export default App;About.js:
import React from 'react';
class About extends React.PureComponent {
render() {
return (
<div>About</div>
)
}
}
export default About;Home.js:
import React from 'react';
class Home extends React.PureComponent {
render() {
return (
<div>Home</div>
)
}
}
export default Home;在 V5 与 V6 它们之间的写法还是有更改的，具体的更改内容参考：https://www.querythreads.com/error-error-a-route-is-only-ever-to-be-used-as-the-child-of-routes-element/
官网文档地址: https://reactrouter.com/web/guides/quick-start
React 路由注意点
- react-router4 之前, 所有路由代码都是统一放到 react-router 中管理的
- react-router4 开始, 拆分为了两个包 react-router-dom 和 react-router-native
- react-router-dom 是在浏览器中使用路由
- react-router-native 是在原生应用中使用的路由(IOS, 安卓)
- BrowserRouter history 模式使用的是 H5 的特性, 所以兼容性会比 HashRouter hash 模式差一些
- 在企业开发中如果不需要兼容低级版本浏览器, 建议使用
BrowserRouter - 如果需要兼容低级版本浏览器, 那么只能使用
HashRouter - 无论是 Link 还是 Route 都只能放到 BrowserRouter 和 HashRouter 中才有效(放在之外就会无效)
Route 注意点^Route注意点
- 默认情况下 Route 在匹配资源地址时, 是
模糊匹配 - 如果必须和资源地址一模一样才匹配, 那么需要添加
exact属性, 开启精准匹配 - Route 在匹配路由的时候, 是利用当前资源地址从左至右的和 path 中的地址进行匹配的
- 只要当前资源地址从左至右完整的包含了 path 中的地址那么就认为匹配成功了
当前资源地址：/home/about
- path 中的地址: /home
- path 中的地址: /home/about
模糊匹配：
App.js:
import React from 'react';
import Home from './components/Home'
import About from './components/About'
import {BrowserRouter, Link, Route} from 'react-router-dom';
class App extends React.PureComponent {
render() {
return (
<div>
<BrowserRouter>
<Link to={'/home'}>Home</Link>
<Link to={'/home/about'}>About</Link>
<Route path="/home" component={Home}/>
<Route path="/home/about" component={About}/>
</BrowserRouter>
</div>
)
}
}
export default App;
精准匹配：
App.js:
import React from 'react';
import Home from './components/Home'
import About from './components/About'
import {BrowserRouter, Link, Route} from 'react-router-dom';
class App extends React.PureComponent {
render() {
return (
<div>
<BrowserRouter>
<Link to={'/home'}>Home</Link>
<Link to={'/home/about'}>About</Link>
<Route exact path="/home" component={Home}/>
<Route exact path="/home/about" component={About}/>
</BrowserRouter>
</div>
)
}
}
export default App;
Link 注意点
- 默认情况下 Link 会渲染成一个 a 标签
- 如果想渲染成其他的元素, 可以通过手动路由跳转来实现(后续文章嵌套路由在介绍)
NavLink
除了 Link 可以修改资源地址外，还可以通过 NavLink 修改，也是可以的。
NavLink 注意点：
- NavLink 在匹配路由的时候, 是利用当前资源地址从左至右的和 path 中的地址进行匹配的
- 只要当前资源地址从左至右完整的包含了 path 中的地址那么就认为匹配
- 默认情况下 NavLink 在匹配资源地址时, 是模糊匹配
- 如果必须和资源地址一模一样才匹配, 那么需要添加
exact属性, 开启精准匹配
当前资源地址: /home/about
- to 中的地址: /home
- to 中的地址: /home/about
关于 NavLink 更多的 Api 可去官方文档进行查看：
如上图中的我所标记出来的一个属性是设置选中激活状态下的样式，如果是模糊匹配出现的效果就是其它的 Link 状态链接的样式也会进行更改，需要设置为精确匹配才可以达到点击那个就是那个链接的样式改变的效果。
也就是说，在浏览器的路径当中如果是 home/about 下方页面，会渲染出两个组件分别是 home 与 about 组件。但是在 v5 与 v6 好像 React 已经做出了改动特性与语法会有所不同，本篇文章到此为止就差不多就如上这些内容了，其它的内容我会再起一篇文章继续介绍。
^Route注意点: NavLink 注意点与 Route 同理
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
