构建一个react项目 - 超详细 - 路由之动态路由（三）

1 - SPA的理解

• 单页面应用 （single page web application, SPA）
• 整个应用只有一个完整页面
• 页面实现局部刷新
• 数据实现异步请求

2 - 路由

• 一个路由就是一个映射关系（key:value）
• key为路径，value可能为function（后端）或component（前端）

3 - react中路由的应用

• react不像vue有独立创建路由的.js文件，react的路由需要安装依赖

3.1 - 路由的安装

npm install react-router-dom
// 注意安装的版本问题，5.x.x 和 6.x.x一些API使用的区别

3.2 - 改造react项目的index.js文件

1. 关闭严格模式 - 路由才可正常跳转
2. 引入 BrowserRouter 或 HashRouter

【 -- 注意点 -- : BrowserRouter与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.3 - 新增一些页面 -- home/about/dashboard

3.4 - app.js进行路由配置

------- app.js -------
import { HashRouter as Routes, Route, NavLink } from 'react-router-dom'

import Home from './pages/home'
import About from './pages/about'
import Dashboard from './pages/dashboard'

function App() {
  return (
    <div className="App">
      <div>
        <NavLink to='/' exact>Home</NavLink>
        <NavLink to='/about'>About</NavLink>
        <NavLink to='/dashboard'>Dashboard</NavLink>
      </div>
      <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='/about' element={<About />}></Route>
        <Route path='/dashboard' element={<Dashboard />}></Route>
      </Routes>
    </div>
  );
}

export default App;

3.5 - 关于组件中的路由跳转方法 [ 以about组件为例 ]

• 使用react-router-dom中的Link

import { Link } from 'react-router-dom'

<Link to={{ pathname: '/dashboard'}}>
    <button>去Dashboard页面</button>
</Link>

• 使用react-router-dom中的history （react-router-dom@v.6版本）

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

const history = useNavigate()
function toDashboardPage() {
    history('/dashboard')
}
return (
    <div>
        <h1>About页面</h1>
        <button onClick={toDashboardPage}>去Dashboard页面</button>
    </div>
)

【注】

• react-router-dom@v.5版本使用的是 useHistory
  出现“Uncaught TypeError: history.push is not a function”错误 | (1r1g.com)

3.6 - 路由传参

• 使用react-router-dom中的history进行传参
  • search
  • state

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

const history = useNavigate()
function toDashboardPage() {
    const param = {
        pathname: '/dashboard',
        search: 'test=222'
    }
    history(param)
}
return (
    <div>
        <h1>About页面</h1>
        <button onClick={toDashboardPage}>去Dashboard页面</button>
    </div>
)

------ state ------ 目前不成功
import { useNavigate } from 'react-router-dom'

const history = useNavigate()
function toDashboardPage() {
    const param = {
        pathname: '/dashboard',
        state: { test: '222' }
    }
    history(param)
}
return (
    <div>
        <h1>About页面</h1>
        <button onClick={toDashboardPage}>去Dashboard页面</button>
    </div>
)

【接收】

import React from 'react'
import { useParams } from 'react-router-dom'

import { useLocation } from 'react-router-dom'
const Dashboard = (props) => {
    const location = useLocation()
    console.log('LOCATION ================ ', location);
    return (
        <div>
            <h1>Dashboard页面</h1>
        </div>
    )
}
export default Dashboard

• 在路由中进行参数配置 + react-router-dom中的Link

import { HashRouter as Router, Routes, Route, NavLink, Redirect } from 'react-router-dom'

import Home from './pages/home'
import About from './pages/about'
import Dashboard from './pages/dashboard'

function App() {
  return (
    <div className="App">
      <div>
        <NavLink to='/' exact="true">Home</NavLink>
        <NavLink to='/about'>About</NavLink>
        <NavLink to='/dashboard'>Dashboard</NavLink>
      </div>
      <Routes>
        <Route exact path='/' element={<Home />}></Route>
        <Route exact path='/about/:name' element={<About />}></Route>
        <Route exact path='/dashboard' element={<Dashboard />}></Route>
      </Routes>
    </div>
  );
}
export default App;

----- home -----
import React from 'react'
import { Link } from 'react-router-dom'

const Home = (props) => {
    return (
        <div>
            <h1>Home页面</h1>
            <Link to={'/about/elio'}>去about页面</Link>
        </div>
    )
}
export default Home

----- about -----
import React from 'react'
import { useParams } from 'react-router-dom'

const About = (props) => {
    const param = useParams()
    console.log('参数 ----------- ', param);    
    return (
        <div>
            <h1>About页面</h1>
        </div>
    )
}
export default About