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方法会报错