React-路由

React路由

前端路由功能：让用户从一个视图导航到另一个视图

前端路由是一套映射规则，在React中，是URL和组件对应关系

使用React路由简单来说，就是配置路径和组件（配对）

 

路由的基本使用

 

import React from 'react';
import ReactDOM from 'react-dom/client';

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'

const First = () => (<p>页面一的内容</p>)
//使用Router组件包裹整个应用
const App1 = () => (
  <Router>

    <div>
      <h1>React路由基础</h1>
      {/* 指定路由入口 */}
      to属性：浏览器地址栏中的pathname（location.pathname）
      <Link to="/first">页面一</Link>
      {/* 指定路由出口 */}
      <Routes>
        {/* route组件写在哪，渲染出来的组件就展示在哪 */}
        <Route path="/first" element={<First />} />
      </Routes>
    </div>
  </Router>
)
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App1 />);

路由的执行过程

1.点击Link组件（a标签），修改了浏览器地址栏中的url

2.React路由监听到地址栏url变化

3.React路由内部遍历所有Route组件，使用路由规则（path）与pathname进行匹配

4.当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容

const First = () => (<p>页面一的内容</p>)
const Home = () => <h1>home内容</h1>
//使用Router组件包裹整个应用
const App1 = () => (
  <Router>

    <div>
      <h1>React路由基础</h1>
      {/* 指定路由入口 */}
      {/* to属性：浏览器地址栏中的pathname（location.pathname） */}
      <Link to="/first">页面一</Link><br />
      <Link to="/home">home页面</Link>
      {/* 指定路由出口 */}
      <Routes>
        {/* route组件写在哪，渲染出来的组件就展示在哪 */}
        <Route path="/first" element={<First />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </div>
  </Router>
)

编程式导航

通过js实现页面跳转

//编程式导航
class Login extends React.Component {
  handelLogin = () => {
    this.props.history.push('/home')
  }
  render() {
    return (
      <div>
        <p>登录页面：</p>
        <button onClick={this.handelLogin}>登录</button>
      </div>
    )
  }
}
const Home = (props) => {
  const handleBack = () => {
    props.history.go(-1)
  }
  return (
    < div >
      <h2>我是后台首页</h2>
      <button onClick={handleBack}>返回登录页面</button>
    </div >
  )
}
const App = () => (
  <Router>
    <div>
      <h1>编程式导航：</h1>
      <Link to="/login">去登录首页</Link>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </div>
  </Router>
)
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

默认路由

 

const Home = () => (
  <h2>进入页面就会匹配的路由</h2>
)
const App = () => (
  <Router>
    <div>
      <h1>默认路由</h1>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  </Router>
)
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

匹配模式

模糊匹配模式

模糊匹配模式：只要pathname以path开头就会匹配成功

 

精确匹配模式

const App = () => (
  <Router>
    <div>
      <h1>默认路由</h1>
      <Link to="/first">精确</Link>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 精确匹配，只需要加入exact属性 */}
        <Route path="/first" exact element={<First />} />
      </Routes>
    </div>
  </Router>
)