路由的安装
首先我们需要安装router
npm,cnpm之类的安装都行,我这里使用yarn
yarn add -D react-router-dom
新建页面
这里我新建几个页面待会方便演示路由跳转,页面里面就是基础的内容
引入路由
在app.js中进行引入刚刚安装的router相关工具和上面写的页面:
import React, {
Component } from 'react'
import {
BrowserRouter as Router, NavLink, Link, Route } from 'react-router-dom'
import Home from './pages/home'
import User from './pages/user'
import About from './pages/about'
使用路由
上面引入之后,下面我们进行使用,还是在app.js中
- 首先外层需要使用标签进行包裹
- 在需要点击的地方,使用Link标签中的to进行跳转
- 在后面使用Router标签,对应上面得到link中to后面的路径。还有还有一个component属性,在里面写需要的组件进行渲染
- 为了避免重复路由,这里给根路径加上exact进行精确匹配
- 如果想个标签加一个选中改变颜色的效果,可以使用< NavLink>标签
export class App extends Component {
render() {
return (
<>
<Router>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">关于</Link></li>
<li><NavLink activeStyle={
{
'color': 'yellow'}} to="/user">用户中心</NavLink></li>
</ul>
{
/* exact是精确匹配 */}
<Route path='/' exact component={
Home} />
<Route path='/about' component={
About} />
<Route path='/user' component={
User} />
</Router>
</>
)
}
}
效果演示
好了,本篇文章到这里结束了,如果对你有帮助,可以点赞关注支持一下~~
后续我还会带来更多前端知识内容