React Router基本原理

最新推荐文章于 2024-07-27 11:38:12 发布

真不可思议

最新推荐文章于 2024-07-27 11:38:12 发布

阅读量365

点赞数

分类专栏： React 框架

本文链接：https://blog.csdn.net/Hello_world_XXL/article/details/116170634

版权

本文介绍了React Router的基本原理，包括不同浏览器环境下的历史记录管理，以及如何使用HashRouter、BrowserRouter、NavLink和Route。此外，还详细讨论了传参方法、编程式导航、switch与404处理、Redirect和Prompt的运用，以及子路由的配置。同时，文章还提到了在create-react-app中支持装饰器的配置方法。

摘要由CSDN通过智能技术生成

React Router甚至大部分的前端路由都是依赖于history.js的，它是一个独立的第三方js库。可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的API。

老浏览器的history: 通过hash来存储在不同状态下的history信息，对应createHashHistory，通过检测location.hash的值的变化，使用location.replace方法来实现url跳转。通过注册监听window对象上的hashChange事件来监听路由的变化，实现历史记录的回退。
高版本浏览器: 利用HTML5里面的history，对应createBrowserHistory, 使用包括pushState， replaceState方法来进行跳转。通过注册监听window对象上的popstate事件来监听路由的变化，实现历史记录的回退。
node环境下: 在内存中进行历史记录的存储，对应createMemoryHistory。直接在内存里push和pop状态。

基础路由

安装依赖 npm i -S react-router-dom

引入

import { HashRouter as Router, Route, Link } from 'react-router-dom';

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => (<div>首页</div>)
const About = () => (<div>关于我们</div>)
const App = () => (
  <Router>
    <div>
      <Link to={"/"}>首页</Link>
      <Link to={"/about"}>关于我们</Link>
    </div>
    {/* exact={true}  只完全匹配/ */}
    <div>
      <Route path={"/"} component={Home} />
      <Route path={"/about"} component={About} />
    </div>
  </Router>
)
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

BrowserRouter | HashRouter,前者不带#，后者带#

NavLink | Link, 前者可以设置用户的选中样式，后者不可以 ---- 用来做声明式跳转

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import "./index.css";
//BrowserRouter 不带#，NavLink有激活状态链接效果 
const Home = () => (<div>首页</div>)
const About = () => (<div>关于我们</div>)
const App = () => (
  <Router>
    <div>
      <NavLink to={"/"} exact={true} >首页</NavLink>
      <NavLink to={"/about"}>关于我们</NavLink>
    </div>
    {/*   只完全匹配/ */}
    <div>
      <Route path={"/"} exact={true} component={Home} />
      <Route path={"/about"} component={About} />
    </div>