React Router基本原理

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>