react中router路由的基础用法详解（实战小案例讲解）

路由的安装

首先我们需要安装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中

1. 首先外层需要使用标签进行包裹
2. 在需要点击的地方，使用Link标签中的to进行跳转
3. 在后面使用Router标签，对应上面得到link中to后面的路径。还有还有一个component属性，在里面写需要的组件进行渲染
4. 为了避免重复路由，这里给根路径加上exact进行精确匹配
5. 如果想个标签加一个选中改变颜色的效果，可以使用< 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>
      </>
    )
  }
}

效果演示

好了，本篇文章到这里结束了，如果对你有帮助，可以点赞关注支持一下~~
后续我还会带来更多前端知识内容