ReactRouter与 Redux

ReactRouterV6.4

npm i react-router-dom
npm install sass

src/App.js

// import logo from './logo.svg';
import './App.css';
import { Link, Outlet } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <h2>react</h2>
      <Link to="/">首页</Link> | <Link to="/about">关于</Link>
      <Outlet />
    </div>
  );
}

export default App;

src/router/index.js

import { createBrowserRouter } from "react-router-dom"
import Home from "../views/Home/Home"
import About from "../views/About/About"
import Foo from "../views/Foo/Foo"
import Bar from "../views/Bar/Bar"
import App from '../App'

const routes = [
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '',
        element: <Home />
      },
      {
        path: 'about',
        element: <About />,
        children: [
          {
            path: 'foo',
            element: <Foo></Foo>
          },
          {
            path: 'bar',
            element: <Bar></Bar>
          }
        ]
      }
    ]
  }
]

const router = createBrowserRouter(routes)

export default router

动态路由与编程式路由模式

src/router/index.js

{
  path: 'foo/:id',
  element: <Foo></Foo>
},

src/views/Foo/Foo.jsx

import React from 'react'
import './Foo.scss'
import { useParams } from 'react-router-dom'

export default function Foo() {
  const params=useParams()
  return (
    <div>Foo,{params.id}</div>
  )
}

src/views/About/About.jsx

import React from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'
import './About.scss'

export default function About() {
  const naviegate=useNavigate()
  const handleClick=()=>{
    naviegate('/about/bar')
  }
  return (
    <div>
      <h3>About</h3>
      {/* <Link to='/about/foo'>foo</Link> | <Link to='/about/bar'>bar</Link> */}
      <Link to='/about/foo/123'>foo123</Link> | <Link to='/about/foo/456'>foo456</Link>
      <button onClick={handleClick}>跳转到bar</button>
      <Outlet></Outlet>
    </div>
  )
}

useLocation与useSearchParams

src/views/Bar/Bar.jsx

import React from 'react'
import { useLocation, useSearchParams } from 'react-router-dom'
import './Bar.scss'

export default function Bar() {
  const location = useLocation()
  console.log(location)
  const [searchParams, setSearchParams] = useSearchParams()
  console.log(searchParams.get('username'))
  // const handleClick = () => {
  //   setSearchParams({ age: 20 })
  // }

  // return <div onClick={handleClick}>Bar</div>
  return <div>Bar</div>
}

默认路由展示与重定向路由与 404 页面

src/router/index.js

import { createBrowserRouter, Navigate } from "react-router-dom"
import Home from "../views/Home/Home"
import About from "../views/About/About"
import Foo from "../views/Foo/Foo"
import Bar from "../views/Bar/Bar"
import App from '../App'

const routes = [
  {
    path: '/',
    element: <App />,
    errorElement:<div>404</div>,
    children: [
      {
        path: '',
        element: <Home />
      },
      {
        path: 'about',
        element: <About />,
        children: [
          {
            index: true,
            // element:<div>默认的内容</div>
            element:<Navigate to="/about/foo/123"></Navigate>
          },
          {
            path: 'foo/:id',
            element: <Foo></Foo>
          },
          {
            path: 'bar',
            element: <Bar></Bar>
          },
          {
            path:"*",
            element:<div>404</div>
          }
        ]
      }
    ]
  }
]

const router = createBrowserRouter(routes)

export default router

路由 loader 函数与 redirect 方法

src/router/index.js

{
  path: 'bar',
    element: <Bar></Bar>,
  loader: async () => {
    let ret = await new Promise((resolve) => {
      setTimeout(() => {
        resolve({ errorcode: Math.random() > 0.5 ? 0 : -1 })
      }, 1000)
    })
    if(ret.errorcode===0){
      return ret
    }
    else{
      console.log('/home')
      return redirect('/')
    }
  },
},

src/views/Bar/Bar.jsx

import React from 'react'
import { useLoaderData } from 'react-router-dom'
import './Bar.scss'

export default function Bar() {
  const data = useLoaderData()
  console.log(data)
  return <div>Bar</div>
}

自定义全局守卫与自定义元信息

src/components/BeforeEach.jsx

import React from 'react'
import { matchRoutes, Navigate, useLocation } from 'react-router-dom'
import { routes } from '../router'

export default function BeforeEach(props) {
  const location = useLocation()
  console.log('beforeEach')
  const matchs = matchRoutes(routes, location)
  // console.log('

标签：count,react,const,RTK,React,state,import,Foo,路由	

From： https://www.cnblogs.com/hwq1009/p/17059000.html