react-router-dom v6路由

react路由模块react-router-dom的6.x版本较老版本有较大改动，具体用法如下：

1. 下载react-router-dom

npm i react-router-dom --save

2.在入口文件引入BrowserRouter包裹App根组件

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 react路由分为hash路由和history路由两种

hash路由：

import { BrowserRouter } from 'react-router-dom';  // Hash路由

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

history路由：

import { HashRouter} from 'react-router-dom';  // History路由

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

区别：

　　1）底层原理不一样：
　　　　BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
　　　　HashRouter使用的是URL的哈希值。
　　2） path表现形式不一样
　　　　BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
　　　　HashRouter的路径包含#,例如：localhost:3000/#/demo/test
　　3）刷新后对路由state参数的影响
　　　　(1).BrowserRouter没有任何影响，因为state保存在history对象中。
　　　　(2).HashRouter刷新后会导致路由state参数的丢失。
　　4）HashRouter可以用于解决一些路径错误相关的问题

3.新建router.js路由文件

router.js

import React, { Component } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
// 引入组件
import Home from "./../pages/home/index";

export default class Router extends Component {
    render() {
        return (
            <Routes>
                {/* 重定向 */}
                <Route path="/" element={<Home />} exact></Route>
                <Route path="/home" element={<Home />}></Route>
                <Route path="*" element={<Navigate to="/home" />}></Route>
            </Routes>
        )
    }
}

在v6版本中：

　　1）取消了<Switch>，取而代之的是<Routes>，所有的路由都放在<Routes>里面

　　2）<Route>中指定路由渲染组件的属性由compoment变成了element

　　3）<Route>中的重定向由<Redirect>变为<Navigate>

4. 在文件中引用路由文件

import { Link} from 'react-router-dom';
import './App.scss';
import Header from './pages/header/header';
import Router from './router/router';

function App() {
  return (
    <div className="App">
      <div className="header">
        <Link to="/home">home</Link>
        <Link to="/page1">page1</Link>
        <Link to="/page2">page2</Link>
      </div>
      <div className="content-position">
        <Router></Router>
      </div>
    </div>
  );
}

export default App;        

5. 路由跳转 

1）链接路由跳转：

有两种方式：<NavLink>和<Link>

<NavLink>有高亮样式，<Link>不带高亮样式

import { Link, NavLink } from 'react-router-dom';

<NavLink activeClassName="active" to="/home">去首页</NavLink> // activeClassName：高亮样式类名属性

<Link to="/home">去首页</Link>

 

 

2）编程式路由跳转：

函数式组件：

 

import { useNavigate } from 'react-router-dom';
import './header.scss';

// 函数式组件
function Header() {
    const navigate = useNavigate();  // 注意: useNavigate不能写在嵌套函数中，只能在根函数中使用
    const toHome = ()=>{
        console.log('跳转首页')
         navigate('/home');
    }
}
export default Header

 

类组件：

import { useNavigate } from 'react-router-dom';

export const withNavigation = (Component) => {
    return (props) => <Component {...props} navigate={useNavigate()} />;
};

class Header extends Component {
　　constructor(props){
　　　　super(props)
　　}
　　toHome = ()=>{
　　　　this.props.navigate('home')
　　}
　　render(){
　　　　...
　　}
}

export default withNavigation(Header);  // 用withNavigation将组件包裹起来

原来的this.props.history.push和this.props.history.replace方法会报错