react配置路由 react-route-dom 6.10.0

使用的是react-route-dom 6.10.0版本

react-route-dom提供的相关路由容器有 <BrowserRouter>、<HashRouter>

BrowserRouter：history模式

HashRouter：hash模式

注意：<BrowserRouter>、<HashRouter>组件最好放在最顶层的组件之外

<Route>定义具体的组件

用法：<Route path='路由rul' element={ <组件名 />}  />

例如：

<Route path='/login' element={<Login/>}/>
//Login为引入的组件

Route要求要包含在Routes组件当中

即：

        <Routes>
            <Route path='/' element={<Login/>}/>
            <Route path='/login' element={<Login/>}/>
        </Routes>

具体流程：

1.安装

npm install react-router-dom@6.10.0

2.引入 

import {Route,Routes,HashRouter} from "react-router-dom"

3.定义路由表

const router = <HashRouter>
       <Routes>
           <Route path='/' element={<Login/>}/>
           <Route path='/login' element={<Login/>}/>
           <Route path='/home' element={<Home />} />
       </Routes>
</HashRouter>

4.渲染路由

const container = document.getElementById('root');
const root = createRoot(container);
// root.render(<App />)  
// 添加路由之后 渲染的应该是路由  返回的已经是一个jsx结构了 可以直接放
root.render( router )

实现了根据路由显示页面

5.如果需要一个全局组件存放路由内容页面  可以定义一个app组件  放在Routes外面

class App extends Component {
    render() {
        return (
            // 只需要一个div 显示路由内容 this.props.children显示 相当于插槽
            <div>
                <div>我是app组件 可以放全局的元素</div>
                {/* 显示路由内容区域 */}
                {this.props.children}
            </div>
        )
    }
}


const router = <HashRouter>
    <App>
        <Routes>
            <Route path='/' element={<Login/>}/>
            <Route path='/login' element={<Login/>}/>
            <Route path='/home' element={<Home />} />
        </Routes>
    </App>
</HashRouter>

效果图：

 

路由重定向：

v6版本中 路由重定向使用Navigate组件

用法：

<Route path="/" element={<Navigate to="/home" />}></Route>

完整代码：

import { Component } from "react";
import "./assets/css/comment.less";
import { createRoot } from "react-dom/client";
// 引入路由
import { Routes, Route, HashRouter, Navigate } from "react-router-dom";

// 引入组件
import Login from "./views/Login";
import Home from "./views/Home";

// import GetRouters from "./router/index";

class App extends Component {
  render() {
    return (
      // 只需要一个div 显示路由内容 this.props.children显示 相当于插槽
      <div>
        <div>我是app组件 可以放全局的元素</div>
        {/* 显示路由内容区域 */}
        {this.props.children}
      </div>
    );
  }
}

const router = (
  <HashRouter>
    <App>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/home" element={<Home />} />
        <Route path="/" element={<Navigate to="/home" />}></Route>
      </Routes>
    </App>
  </HashRouter>
);

// 根据路由表生成对应的路由规则

const container = document.getElementById("root");
const root = createRoot(container);
// root.render(<App />);
// 添加路由之后 渲染的应该是路由  返回的已经是一个jsx结构了 可以直接放
root.render(router);