【React学习】React路由 v6

1. React路由分类

React有三种路由

1. react-router-dom ：用于浏览器的路由
   BrowerRouter 基于浏览器的history
   HashRouter 基于地址部分的hash值（路由带“#”）
2. react-router-native：用于原生app的路由
3. react-router：原生与浏览器通用部分

2. 路由安装

在项目终端里输入npm install react-router-dom
可以在package.json文件夹中检查是否安装成功

3. 渲染路由组件

创建两个路由组件

// About组件
import React, { Component } from 'react'

export default class About extends Component {
    render() {
        return (
            <div>
                <h1>我是About组件</h1>
            </div>
        )
    }
}

// Hello组件
import React, { Component } from 'react'

export default class Hello extends Component {
    render() {
        return (
            <div>
                <h1>我是Hello组件</h1>
            </div>
        )
    }
}

在App.js文件中引入路由和组件

import { BrowserRouter,Link,Route,Routes} from "react-router-dom"   // 引入路由
import Hello from "./Hello"    // 引入组件
import About from './About'

import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <h1>我是App组件</h1>
          <Link to="/hello">hello</Link><br/>
          <Link to="/about">about</Link>
          <Routes>
            <Route path="/hello" element={<Hello/>}></Route>
            <Route path="/about" element={<About/>}></Route>
          </Routes>
        </div>
      </BrowserRouter>
    )
  }
}

export default App;

效果
点击hello渲染Hello组件；点击about渲染About组件

4. 嵌套路由

在v6版本的路由中，使用Routes标签代替v5版本中的Switch标签，且必须加。


效果