17-react-router-dom@6

红色石头本尊
169 阅读3分钟

react-router-dom@6

基础最小化demo

//=> home.js
import React from 'react'
function Home() {
  return (
    <div>Home</div>
  )
}
export default Home

// => About.js
import React from 'react'

function About() {
  return (
    <div>About</div>
  )
}
export default About

//=> App.js
// import ContextComponent from "./Context";
// import EffectCompoent from "./Effect";
// import ReducerComponent from "./Reducer";
// import RefComponent from "./Ref";
// import StateCompent from "./State";
// import MyMemoComponent from "./Memo";
// import CallbackComponent from "./Callback";

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <div className="App">
      {/* 声明非hash模式的路由 */}
      <BrowserRouter>
        {/* 指定跳转的组件 to用来配置路由地址 */}
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        
        {/* 路由出口 路由对应的组件会在这里进行渲染 */}
        <Routes>
          {/*指定路径和组件的对应关系 path:路径 element: 组件成对出现 path-element */}
          <Route path='/' element={<Home />}></Route>
          <Route path='/about' element={<About />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

image.png

路由模式的说明

  • HashRouter: hash路由 => /#/about(兼容性更好,路径丑陋点)
  • BrowserRouter: history路由 => /about(推荐比较好看,需要后端配合)

Link组件

  • 作用：
    • 指定导航链,完成路由跳转
    • to指定路由地址, 最终会渲染成为一个a链接元素
<Link to="about"></Link>

Routes/Route

  • Routes作用:
    • 提供一个路由出口,满足条件的路由会渲染到组件内部
  • Route作用
    • 完成路由的跳转, path:路径 element: 组件成对出现 path-element
{/* 路由出口 路由对应的组件会在这里进行渲染 */}
<Routes>
  {/*指定路径和组件的对应关系 path:路径 element: 组件成对出现 path-element */}
  <Route path='/' element={<Home />}></Route>
  <Route path='/about' element={<About />}></Route>
</Routes>

路由跳转和匹配组件说明

  • 编程式导航 - 跳转
    • 通过js编程的方式进行路由页面的跳转

语法说明

  1. 导入useNavigate钩子函数
  2. 执行钩子函数得到跳转函数
  3. 执行跳转函数完成跳转
  4. 注意: 跳转不行加历史路径, 可以添加额外参数 replace: true
  • 例子：about如最上面的
// => Login.js
import React from 'react'
import { useNavigate } from 'react-router-dom'

function Login() {
  // => 跳转到关于
  const router = useNavigate();
  const goAbout = () => {
    router('/about', {replace: true})
  }
  return (
    <div>
      <button onClick={ goAbout }>toAbout</button>
    </div>
  )
}
export default Login

// => App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Home from "./Home";
import About from "./About";
import Login from './Login';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>

        <Routes>
          <Route path='/' element={<Home />}></Route> 
          <Route path='/about' element={<About />}></Route>
          <Route path='/login' element={<Login />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

image.png

image.png

js跳转携带参数

//=> 两种传参方式
//1. searchParams 传参
navgate('/about?id=1')
//=> 取参数
let [params] = useSearchParams()
let id = params.get('id')

//=> 2. params传参(路径) /about/:id动态路由的形式
navigate('/about/1001')
//=> 取参数
let params = useParams()
let num = params.id

// => Login.js
import React from 'react'
import { useNavigate } from 'react-router-dom'

function Login() {
  // => 跳转到关于
  const router = useNavigate();
  const goAbout = () => {
    router('/about?id=1001', {replace: true})
  }
  return (
    <div>
      <button onClick={ goAbout }>toAbout</button>
    </div>
  )
}
export default Login

// => About.js
import React from 'react'
import { useSearchParams, useParams } from 'react-router-dom'

function About() {
  const [params] = useSearchParams();
  let id = params.get('id')
  return (
    <div>About--- { id }</div>
  )
}
export default About

image.png

嵌套路由 + 二级默认路由

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Article from './layout/Article';
import Board from './layout/Board';
import Layout from './layout/Layout';
import Login from './layout/Login';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            {/* 二级路由嵌套 */}
            {/* 默认二级 添加一个index属性 把它自己path干掉 */}
            <Route index element={<Board />}></Route>
            {/*<Route path='board' element={<Board />}></Route>*/}
            <Route path='article' element={<Article/>}></Route>  
          </Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>   
      </BrowserRouter>    
    </div>
  );
}

export default App;

// Layout.js
import React from 'react'
import { Outlet, Link } from 'react-router-dom'

function Layout() {
  return (
    <div>
      <Link to='/board'>board</Link>
      <br />
      <Link to='/article'>article</Link>
      {/* 二级路由 */}
      <Outlet />
    </div>
  )
}

export default Layout

// Login.js
import React from 'react'
import { Outlet, Link } from 'react-router-dom'

function Layout() {
  return (
    <div>
      <Link to='/'>board</Link>
      <br />
      <Link to='/article'>article</Link>
      {/* 二级路由 */}
      <Outlet />
    </div>
  )
}

export default Layout

// => Board.js
import React from 'react'

function Board() {
  return (
    <div>Board</div>
  )
}
export default Board

import React from 'react'

function Article() {
  return (
    <div>Article</div>
  )
}
export default Article

image.png

404路由配置

  • 在所有的路劲都没匹配的时候显示
  • 在各级路由最后添加 * 作为兜底
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Article from './layout/Article';
import Board from './layout/Board';
import Layout from './layout/Layout';
import Login from './layout/Login';

//=> 404页面
const NotFound = () => {
  return <div>页面丢失,404</div>
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            {/* 二级路由嵌套 */}
            {/* 默认二级 添加一个index属性 把它自己path干掉 */}
            <Route index element={<Board />}></Route>
            <Route path='article' element={<Article/>}></Route>  
            <Route path='*' element={<NotFound />}></Route>
          </Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>   
      </BrowserRouter>    
    </div>
  );
}

export default App;

image.png

avatar
文章
阅读
粉丝