react学习笔记6——ReactRouter6教程

最新推荐文章于 2025-06-05 15:52:39 发布
最新推荐文章于 2025-06-05 15:52:39 发布
阅读量833 收藏 23
点赞数 10
CC 4.0 BY-SA版权
文章标签： react.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58956810/article/details/147657220

React Router 6 快速上手

1.概述

  1. React Router 以三个不同的包发布到 npm 上，它们分别为：

    1. react-router: 路由的核心库，提供了很多的：组件、钩子。

    2. react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。

    3. react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。

  2. 与React Router 5.x 版本相比，改变了什么？

    1. 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。

    2. 语法的变化：component={About} 变为 element={<About/>}等。

    3. 新增多个hook：useParams、useNavigate、useMatch等。

    4. 官方明确推荐函数式组件了！！！

2.Component

1. <BrowserRouter>

  1. 说明：<BrowserRouter> 用于包裹整个应用。

  2. 示例代码： 

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    {/* 整体结构（通常为App组件） */}
  </BrowserRouter>,root
);

2. <HashRouter>

  1. 说明：作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。

  2. 备注：6.x版本中<HashRouter>、<BrowserRouter> 的用法与 5.x 相同。

3. <Routes/> 与 <Route/>

  1. v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。

  2. <Routes> 和 <Route>要配合使用，且必须要用<Routes>包裹<Route>。

  3. <Route> 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

  4. <Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。

  5. 当URL发生变化时，<Routes> 都会查看其所有子<Route> 元素以找到最佳匹配并呈现组件 。

  6. <Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

  7. 示例代码：

<Routes>
    /*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/
    <Route path="/login" element={<Login />}></Route>

		/*用于定义嵌套路由，home是一级路由，对应的路径/home*/
    <Route path="home" element={<Home />}>
       /*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/
      <Route path="test1" element={<Test/>}></Route>
      <Route path="test2" element={<Test2/>}></Route>
		</Route>
	
		//Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
    <Route path="users">
       <Route path="xxx" element={<Demo />} />
    </Route>
</Routes>

4. <Link>

  1. 作用: 修改URL，且不发送网络请求（路由链接）。

  2. 注意: 外侧需要用<BrowserRouter>或<HashRouter>包裹。

  3. 示例代码：

import { Link } from "react-router-dom";

function Test() {
  return (
    <div>
    	<Link to="/路径">按钮</Link>
    </div>
  );
}

5. <NavLink>

  1. 作用: 与<Link>组件类似，且可实现导航的“高亮”效果。

  2. 示例代码：

// 注意: NavLink默认类名是active，下面是指定自定义的class

//自定义样式
<NavLink
    to="login"
    className={({ isActive }) => {
        console.log('home', isActive)
        return isActive ? 'base one' : 'base'
    }}
>login</NavLink>

/*
	默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，
	当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
*/
<NavLink to="home" end >home</NavLink>

6. <Navigate>

  1. 作用：只要<Navigate>组件被渲染，就会修改路径，切换视图。

  2. replace属性用于控制跳转模式（push 或 replace，默认是push）。

  3. 示例代码：

import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'

export default function Home() {
	const [sum,setSum] = useState(1)
	return (
		<div>
			<h3>我是Home的内容</h3>
			{/* 根据sum的值决定是否切换视图 */}
			{sum === 1 ? <h4>sum的值为{sum}</h4> : <Navigate to="/about" replace={true}/>}
			<button onClick={()=>setSum(2)}>点我将sum变为2</button>
		</div>
	)
}

7. <Outlet>

  1. 当<Route>产生嵌套时，渲染其对应的后续子路由。

  2. 示例代码：

//根据路由表生成对应的路由规则
const element = useRoutes([
  {
    path:'/about',
    element:<About/>
  },
  {
    path:'/home',
    element:<Home/>,
    children:[
      {
        path:'news',
        element:<News/>
      },
      {
        path:'message',
        element:<Message/>,
      }
    ]
  }
])

//Home.js
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'

export default function Home() {
	return (
		<div>
			<h2>Home组件内容</h2>
			<div>
				<ul className="nav nav-tabs">
					<li>
						<NavLink className="list-group-item" to="news">News</NavLink>
					</li>
					<li>
						<NavLink className="list-group-item" to="message">Message</NavLink>
					</li>
				</ul>
				{/* 指定路由组件呈现的位置 */}
				<Outlet />
			</div>
		</div>
	)
}

相关代码：

主要文件：index.js, App.jsx, pages 

一级路由：

 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/bootstrap.css">
  <title>路由测试</title>
  <style>
    .atguigu {
      background-color: orange !important;
      color: white !important;
    }
  </style>
</head>
<body>
  <div id="root"></div>
</body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 App.jsx

import React from 'react'
import {NavLink, Routes,Route} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
import Demo from './pages/Demo'
export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            <NavLink className="list-group-item" to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Routes>
                <Route path="/about" element={<About/>}/>
                {/* 不会继续往下匹配 */}
                {/* <Route path="/about" element={<Demo/>}/> */}
                <Route path="/home" element={<Home/>}/>
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

 pages文件

About.jsx

import React from 'react'

export default function About() {
  return (
    <div>
      <h3>我是About的内容</h3>
    </div>
  )
}

Home.jsx

import React from 'react'

export default function Home() {
  return (
    <div>
      <h3>我是Home的内容</h3>
    </div>
  )
}

 Demo.jsx

import React from 'react'

export default function Demo() {
  return (
    <h1>Demo</h1>
  )
}
重定向

App.jsx

import React from 'react'
import {NavLink, Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
// import Demo from './pages/Demo'
export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            <NavLink className="list-group-item" to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Routes>
                {/* 不区分大小写 */}
                <Route path="/ABOUT" element={<About/>}/>
                {/* 不会继续往下匹配 */}
                {/* <Route path="/about" element={<Demo/>}/> */}
                <Route path="/home" element={<Home/>}/>
                <Route path="/" element={<Navigate to="/about"/>}/>
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

 Home.jsx

import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'
export default function Home() {
  const [sum,setNum] = useState(1)
  return (
    <div>
      <h3>我是Home的内容</h3>
      {sum === 2 ? <Navigate to="/about" replace={true}/> : <h4>当前sum的值是：{sum}</h4>}
      <button onClick={()=>setNum(2)}>点我将sum变为2</button>
    </div>
  )
}
NavLink高亮

App.jsx

import React from 'react'
import {NavLink, Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
// import Demo from './pages/Demo'
export default function App() {
  function computedClassName({isActive}){
    return isActive ? 'list-group-item atguigu' : 'list-group-item'
  }
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className={computedClassName} to="/about">About</NavLink>
            <NavLink className={computedClassName} to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Routes>
                <Route path="/about" element={<About/>}/>
                {/* 不会继续往下匹配 */}
                {/* <Route path="/about" element={<Demo/>}/> */}
                <Route path="/home" element={<Home/>}/>
                <Route path="/" element={<Navigate to="/about"/>}/>
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

 About.jsx

import React from 'react'

export default function About() {
  return (
    <div>
      <h3>我是About的内容</h3>
    </div>
  )
}

Home.jsx

import React from 'react'
export default function Home() {
  return (
    <div>
      <h3>我是Home的内容</h3>
    </div>
  )
}

3.Hooks

1. useRoutes()

  1. 作用：根据路由表，动态创建<Routes>和<Route>。

  2. 示例代码：

//路由表配置：src/routes/index.js
import About from '../pages/About'
import Home from '../pages/Home'
import {Navigate} from 'react-router-dom'

export default [
	{
		path:'/about',
		element:<About/>
	},
	{
		path:'/home',
		element:<Home/>
	},
	{
		path:'/',
		element:<Navigate to="/about"/>
	}
]

//App.jsx
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'

export default function App() {
	//根据路由表生成对应的路由规则
	const element = useRoutes(routes)
	return (
		<div>
			......
      {/* 注册路由 */}
      {element}
		  ......
		</div>
	)
}

 视频代码：

App.jsx

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'
export default function App() {
  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes)
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            <NavLink className="list-group-item" to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {/* <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/home" element={<Home />} />
                <Route path="/" element={<Navigate to="/about" />} />
              </Routes> */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

 routes/index.jsx

import About from '../pages/About'
import Home from '../pages/Home'
import { Navigate } from 'react-router-dom'

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  },
]

2. useNavigate()

  1. 作用：返回一个函数用来实现编程式导航。

  2. 示例代码：

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

export default function Demo() {
  const navigate = useNavigate()
  const handle = () => {
    //第一种使用方式：指定具体的路径
    navigate('/login', {
      replace: false,
      state: {a:1, b:2}
    }) 
    //第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法
    navigate(-1)
  }
  
  return (
    <div>
      <button onClick={handle}>按钮</button>
    </div>
  )
}

3. useParams()

  1. 作用：回当前匹配路由的params参数，类似于5.x中的match.params。

  2. 示例代码：

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
import User from './pages/User.jsx'

function ProfilePage() {
  // 获取URL中携带过来的params参数
  let { id } = useParams();
}

function App() {
  return (
    <Routes>
      <Route path="users/:id" element={<User />}/>
    </Routes>
  );
}

4. useSearchParams()

  1. 作用：用于读取和修改当前位置的 URL 中的查询字符串。

  2. 返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

  3. 示例代码：

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

export default function Detail() {
	const [search,setSearch] = useSearchParams()
	const id = search.get('id')
	const title = search.get('title')
	const content = search.get('content')
	return (
		<ul>
			<li>
				<button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button>
			</li>
			<li>消息编号：{id}</li>
			<li>消息标题：{title}</li>
			<li>消息内容：{content}</li>
		</ul>
	)
}

5. useLocation()

  1. 作用：获取当前 location 信息，对标5.x中的路由组件的location属性。

  2. 示例代码：

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

export default function Detail() {
	const x = useLocation()
	console.log('@',x)
  // x就是location对象: 
	/*
		{
      hash: "",
      key: "ah9nv6sz",
      pathname: "/login",
      search: "?name=zs&age=18",
      state: {a: 1, b: 2}
    }
	*/
	return (
		<ul>
			<li>消息编号：{id}</li>
			<li>消息标题：{title}</li>
			<li>消息内容：{content}</li>
		</ul>
	)
}

6. useMatch()

  1. 作用：返回当前匹配信息，对标5.x中的路由组件的match属性。

  2. 示例代码：

<Route path="/login/:page/:pageSize" element={<Login />}/>
<NavLink to="/login/1/10">登录</NavLink>

export default function Login() {
  const match = useMatch('/login/:x/:y')
  console.log(match) //输出match对象
  //match对象内容如下：
  /*
  	{
      params: {x: '1', y: '10'}
      pathname: "/LoGin/1/10"  
      pathnameBase: "/LoGin/1/10"
      pattern: {
      	path: '/login/:x/:y', 
      	caseSensitive: false, 
      	end: false
      }
    }
  */
  return (
  	<div>
      <h1>Login</h1>
    </div>
  )
}

7. useInRouterContext()

作用：如果组件在 <Router> 的上下文中呈现，则 useInRouterContext 钩子返回 true，否则返回 false。

8. useNavigationType()

  1. 作用：返回当前的导航类型（用户是如何来到当前页面的）。

  2. 返回值：POP、PUSH、REPLACE。

  3. 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）。

9. useOutlet()

  1. 作用：用来呈现当前组件中渲染的嵌套路由。

  2. 示例代码：

const result = useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象

10.useResolvedPath()

  1. 作用：给定一个 URL值，解析其中的：path、search、hash值。

相关代码：

05_src_嵌套路由嵌套路由

App.jsx

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'
export default function App() {
  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes)
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            {/* 自己路由高亮之后，父级路由不高亮 */}
            <NavLink className="list-group-item" end to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {/* <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/home" element={<Home />} />
                <Route path="/" element={<Navigate to="/about" />} />
              </Routes> */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

routes/index.js

import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import { Navigate } from 'react-router-dom'

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />,
    children:[
      {
        path: 'news',
        element:<News/>
      },
      {
        path: 'message',
        element:<Message/>
      },
    ]
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  },
]

pages/Home.jsx

import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'
export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            {/* 在不破幻原来路径的情况下加一个news:./或不写 */}
            <NavLink className="list-group-item" to="news">News</NavLink>
          </li>
          <li>
            <NavLink className="list-group-item" to="message">Message</NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet/>
      </div>
    </div>
  )
}

pages/Message.jsx

import React from 'react'

export default function Message() {
  return (
    <div>
      <ul>
        <li>
          <a href="/message1">message001</a>&nbsp;&nbsp;
        </li>
        <li>
          <a href="/message2">message002</a>&nbsp;&nbsp;
        </li>
        <li>
          <a href="/message/3">message003</a>&nbsp;&nbsp;
        </li>
      </ul>
    </div>
  )
}

pages/News.jsx

import React from 'react'

export default function News() {
  return (
    <ul>
      <li>news001</li>
      <li>news002</li>
      <li>news003</li>
    </ul>
  )
}

06_src_路由的params参数

App.jsx

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'
export default function App() {
  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes)
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            <NavLink className="list-group-item" end to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {/* <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/home" element={<Home />} />
                <Route path="/" element={<Navigate to="/about" />} />
              </Routes> */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

routes/index.js

import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
import { Navigate } from 'react-router-dom'

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />,
    children:[
      {
        path: 'news',
        element:<News/>
      },
      {
        path: 'message',
        element:<Message/>,
        children: [
          {
            path:'detail/:id/:title/:content',
            element: <Detail/>
          }
        ]
      },
    ]
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  },
]

pages/Home.jsx

import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'
export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            {/* 在不破幻原来路径的情况下加一个news */}
            <NavLink className="list-group-item" to="news">News</NavLink>
          </li>
          <li>
            <NavLink className="list-group-item" to="message">Message</NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet/>
      </div>
    </div>
  )
}

pages/Message.jsx

import React,{useState} from 'react'
import {Link, Outlet} from 'react-router-dom'
export default function Message() {
  const [messgaes] = useState([
    { id: '001', title: '消息1', content: '锄禾日当午' },
    { id: '002', title: '消息2', content: '汗滴禾下土' },
    { id: '003', title: '消息3', content: '谁知盘中餐' },
    { id: '004', title: '消息4', content: '粒粒皆辛苦' },
  ])
  return (
    <div>
      <ul>
        {
          messgaes.map((m) => {
            return (
              // 路由链接
              <li  key={m.id}>
                {/* 子路由不需要加/ */}
                <Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>
              </li>
            )
          })
        }
      </ul>
      <hr />
      {/* 指定路由组件的展示位置 */}
      <Outlet/>
    </div>
  )
}

pages/Detail.jsx

import React from 'react'
import {useParams,useMatch} from 'react-router-dom'
export default function Detail() {
  const {id,title,content} = useParams()
  // const x = useMatch('/home/message/detail/:id/:title/:content')
  // console.log(x);
  return (
    <ul>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
      <li>消息内容：{content}</li>
    </ul>
  )
}

07_src_路由的search参数

App.jsx

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'
export default function App() {
  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes)
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>React Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            <NavLink className="list-group-item" end to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {/* <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/home" element={<Home />} />
                <Route path="/" element={<Navigate to="/about" />} />
              </Routes> */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

 routes/index.js

import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
import { Navigate } from 'react-router-dom'

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />,
    children:[
      {
        path: 'news',
        element:<News/>
      },
      {
        path: 'message',
        element:<Message/>,
        children: [
          {
            path:'detail',
            element: <Detail/>
          }
        ]
      },
    ]
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  },
]

pages/Message.jsx

import React,{useState} from 'react'
import {Link, Outlet} from 'react-router-dom'
export default function Message() {
  const [messgaes] = useState([
    { id: '001', title: '消息1', content: '锄禾日当午' },
    { id: '002', title: '消息2', content: '汗滴禾下土' },
    { id: '003', title: '消息3', content: '谁知盘中餐' },
    { id: '004', title: '消息4', content: '粒粒皆辛苦' },
  ])
  return (
    <div>
      <ul>
        {
          messgaes.map((m) => {
            return (
              // 路由链接
              <li  key={m.id}>
                {/* 子路由不需要加/ */}
                <Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
              </li>
            )
          })
        }
      </ul>
      <hr />
      {/* 指定路由组件的展示位置 */}
      <Outlet/>
    </div>
  )
}

pages/Detail.jsx

import React from 'react'
import { useSearchParams, useLocation } from 'react-router-dom'
export default function Detail() {
  const [search, setSearch] = useSearchParams()
  const id = search.get('id');
  const title = search.get('title');
  const content = search.get('content');
  const x = useLocation()
  console.log('@',x);
  return (
    <ul>
      <li>
        <button onClick={() => setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button>
      </li>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
      <li>消息内容：{content}</li>
    </ul>
  )
}

08_src_路由的state参数

pages/Message.jsx

import React, { useState } from 'react'
import { Link, Outlet } from 'react-router-dom'
export default function Message() {
  const [messgaes] = useState([
    { id: '001', title: '消息1', content: '锄禾日当午' },
    { id: '002', title: '消息2', content: '汗滴禾下土' },
    { id: '003', title: '消息3', content: '谁知盘中餐' },
    { id: '004', title: '消息4', content: '粒粒皆辛苦' },
  ])
  return (
    <div>
      <ul>
        {
          messgaes.map((m) => {
            return (
              // 路由链接
              <li key={m.id}>
                {/* 子路由不需要加/ */}
                <Link
                  to="detail"
                  state={{
                    id: m.id,
                    title: m.title,
                    content: m.content
                  }}
                >{m.title}</Link>
              </li>
            )
          })
        }
      </ul>
      <hr />
      {/* 指定路由组件的展示位置 */}
      <Outlet />
    </div>
  )
}

pages/Detail.jsx

import React from 'react'
import {useLocation} from 'react-router-dom'
export default function Detail() {
  const {state:{id,title,content}}= useLocation()
  return (
    <ul>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
      <li>消息内容：{content}</li>
    </ul>
  )
}

 routes/index.js

import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
import { Navigate } from 'react-router-dom'

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />,
    children:[
      {
        path: 'news',
        element:<News/>
      },
      {
        path: 'message',
        element:<Message/>,
        children: [
          {
            path:'detail',
            element: <Detail/>
          }
        ]
      },
    ]
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  },
]

09_src_编程式路由导航

routes/index.js

import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
import { Navigate } from 'react-router-dom'

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />,
    children:[
      {
        path: 'news',
        element:<News/>
      },
      {
        path: 'message',
        element:<Message/>,
        children: [
          {
            path:'detail',
            element: <Detail/>
          }
        ]
      },
    ]
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  },
]

pages/Message.jsx

import React, { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'
export default function Message() {
  const navigate = useNavigate()
  const [messgaes] = useState([
    { id: '001', title: '消息1', content: '锄禾日当午' },
    { id: '002', title: '消息2', content: '汗滴禾下土' },
    { id: '003', title: '消息3', content: '谁知盘中餐' },
    { id: '004', title: '消息4', content: '粒粒皆辛苦' },
  ])
  function showDetail(m) {
    console.log(666);
    navigate('detail', {
      replace: false,
      state: {
        id: m.id,
        title: m.title,
        content: m.content
      }
    })
  }
  return (
    <div>
      <ul>
        {
          messgaes.map((m) => {
            return (
              // 路由链接
              <li key={m.id}>
                {/* 子路由不需要加/ */}
                <Link
                  to="detail"
                  state={{
                    id: m.id,
                    title: m.title,
                    content: m.content
                  }}
                >{m.title}</Link>
                &nbsp;
                <button onClick={() => showDetail(m)}>查看详情</button>
              </li>
            )
          })
        }
      </ul>
      <hr />
      {/* 指定路由组件的展示位置 */}
      <Outlet />
    </div>
  )
}

pages/Detail.jsx

import React from 'react'
import {useLocation} from 'react-router-dom'
export default function Detail() {
  const {state:{id,title,content}}= useLocation()
  return (
    <ul>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
      <li>消息内容：{content}</li>
    </ul>
  )
}

11_src_useInRouteContext

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import Demo from "./components/Demo";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <div>
    {/* 没有在路由当中使用，所以返回是false */}
    <Demo />
    {/* 其他被路由包裹的组件返回的true，useInRouterContext */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </div>
);

App.jsx

import React from 'react'
import { NavLink, useRoutes,useInRouterContext } from 'react-router-dom'
import routes from './routes'
import Header from './components/Header'
export default function App() {
  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes)
  console.log('@',useInRouterContext());
  return (
    <div>
      <div className="row">
        <Header />
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">About</NavLink>
            <NavLink className="list-group-item" end to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {/* <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/home" element={<Home />} />
                <Route path="/" element={<Navigate to="/about" />} />
              </Routes> */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

routes/index.js

import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
import { Navigate } from 'react-router-dom'

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />,
    children:[
      {
        path: 'news',
        element:<News/>
      },
      {
        path: 'message',
        element:<Message/>,
        children: [
          {
            path:'detail',
            element: <Detail/>
          }
        ]
      },
    ]
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  },
]

12_src_useNavigationType

pages/New.jsx

import React from 'react'
import { useNavigationType } from 'react-router-dom'
export default function News() {
  // 刷新时POP，默认PUSH，路由链接中写成replace={true}，那就是REPLACE
  console.log(useNavigationType());
  return (
    <ul>
      <li>news001</li>
      <li>news002</li>
      <li>news003</li>
    </ul>
  )
}

13_src_useOutlet

pages/Home.jsx

import React from 'react'
import {NavLink,Outlet,useOutlet} from 'react-router-dom'
export default function Home() {
  console.log('##',useOutlet());
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            {/* 在不破幻原来路径的情况下加一个news */}
            <NavLink replace={true}  className="list-group-item" to="news">News</NavLink>
          </li>
          <li>
            <NavLink className="list-group-item" to="message">Message</NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet/>
      </div>
    </div>
  )
}

qq_58956810
关注
全栈视角下的 React Router 开发指南
AI天才研究院
06-07 601
在全栈开发中，“路由”是连接前端页面与后端服务的关键桥梁。前端需要通过路由管理页面跳转（比如从“首页”到“详情页”），后端需要通过路由暴露 API 接口（比如获取用户数据的/api/user）或渲染服务端页面（如 SSR）。本文聚焦React 技术栈下的前端路由管理，同时会讲解如何与后端路由协作（避免冲突、处理 404 等），覆盖 React Router v6 的核心功能与全栈场景实战。
React Router 6
weixin_39927469的博客
07-12 1377
React router 6 学习
React Router 6 (React路由) 最详细教程
热门推荐
蒋川@卡拉云
03-29 1万+
**React Router** 经历多个版本的发展，现在已经到了 **React Router 6**。虽然网络上写 React-Router 路由本身的教程很多，但真正讲到 React-Router 6 的并不多。同时因为第 6 版引入了很多新的概念，以及大量使用 Hook，因此网上的很多旧教程已经不实用了。
React学习笔记_React Router 6
qq_20470063的博客
03-10 767
React学习笔记
react-router-dom v5 与 v6 的区别详解
最新发布
weixin_43991457的博客
06-05 398
React Router v6相较于v5有多项重大改进：路由配置统一为element属性取代component和render；Switch被Routes替代；嵌套路由更直观；useNavigate替换useHistory；默认精确匹配无需exact；取消render props支持；Navigate代替Redirect；优化TS类型支持；v6.4+新增loader/action数据预处理功能。这些改变使API更简洁一致，功能更强大。
React Router6
guai_guai_guai的博客
08-14 1252
1.React Router 以三个不同的包发布到npm上，它们分别为：1.react-router:路由的核心库，提供了很多的：组件、钩子2.react-router-dom:包含react-router所有内容，并添加一些专门用于DOM的组件，例如等3.react-router-native:包括react-router所有内容，并添加一些专门用于ReactNative的API，例如：等。
React学习06-React Router 6
Kingrrr的博客行程
12-30 1851
React Router 6
【尚硅谷React】——React全家桶笔记
m0_67393342的博客
07-29 4649
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图；由Facebook开发且开源。中文官网英文官网原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；JS直接操作DOM会使浏览器进行大量的重绘重排；原生JS没有组件化编码方案，代码复用率低react开发者工具Chrome插件ReactDeveloperTool（注意安装来源为facebook的）方法一在package.json中追加如下配置"proxy""http5000"优点方法二第一步。...
bootcamp-react:训练营React学习笔记
03-19
在React训练营的学习笔记中，我们深入探讨了React——一个由Facebook开发并维护的JavaScript库，用于构建用户界面，特别是单页应用。React以其组件化、声明式编程风格和高效的虚拟DOM更新机制著称，是现代Web开发的...
React（9）—— Hooks - LazyLoad - Context - 组件优化 - 错误边界 - 组件通信方式总结(3)
2401_84149996的博客
05-06 1068
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
笔记、经验、日常分享
04-21 4478
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。如可以使用 createBrowserRouter 或 createHashRouter 函数，以数组形式定义嵌套路由、使用 useRoutes hook 和 React.createElement，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。实现类似VueRouter路由的配置方式。
react-router6
星海拾遗
03-06 1938
react-router6搭建router项目 react-router版本目前已经升级到最新的6.x版本，所以react入门指南中关于路由部分的使用某些用法已经淘汰。这里用一篇简短的文章来概括和复习一下react-router的基本用法。 搭建router项目 第一步，首先需要创建一个react项目 creat-react-app router6 ...
ReactRouter6
Azbtt的博客
05-13 437
react-router: 路由的核心库，提供了很多的：组件、钩子。**react-router-dom:包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等 **。react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:等。与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除，新增 等。
React-Router V6
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
09-02 1125
React-Router V6
【React】React全家桶（八）React Router 6
Better_Xing的博客
06-09 3805
【React】React全家桶（八）React Router 6
6. React-Router 路由
草木红的博客
02-10 1148
React 18 学习 Router 路由
React Router 6的学习
m0_72030584的博客
12-11 1012
本文主要讲述route和router的知识点学习和应用
黑马程序员React18笔记
04-01
### 黑马程序员 React 18 学习笔记教程 React 是一种用于构建用户界面的 JavaScript 库，而黑马程序员提供了丰富的学习资源来帮助开发者掌握这一技术。以下是有关 React 18 的一些核心知识点以及如何通过这些知识点深入理解 React。 #### 一、React 基础概念 React 提供了一种声明式的方式来构建用户界面。其核心特性包括组件化开发、虚拟 DOM 和单向数据流。对于初学者来说，了解以下基础知识是非常重要的： - **JSX语法**：这是一种扩展的 JavaScript 语法，允许我们在 JSX 中嵌入表达式[^3]。 - **列表渲染与条件渲染**：通过 `map` 方法可以实现列表渲染；利用三元运算符或者逻辑判断语句可完成条件渲染。 ```javascript const items = ['Item1', 'Item2', 'Item3']; const listItems = items.map((item, index) => <li key={index}>{item}</li>); ``` - **事件绑定**：React 使用合成事件系统处理用户的交互行为。例如点击按钮触发函数操作。 ```javascript function handleClick() { console.log('Button clicked!'); } <button onClick={handleClick}>Click Me</button> ``` #### 二、React Hooks Hooks 是 React 16.8 引入的新功能，它使得我们可以在不编写类的情况下使用状态和其他 React 特性。常用的 Hook 包括但不限于以下几个方面： - **useState**：管理组件的状态变量。 - **useEffect**：执行副作用的操作，比如订阅外部数据源或手动更改 DOM。 ```javascript import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` #### 三、React 组件间通信 在复杂的项目中，不同层次之间的组件可能需要共享某些信息。这可以通过多种方式实现，其中最常见的是 props 下钻和 Context API[^1]。 - **Props传递**：父级组件将属性传给子级组件作为配置参数。 - **Context API**：当多个层级都需要访问相同的数据时，使用上下文提供全局状态管理方案。 #### 四、React Router 随着应用规模的增长，页面导航变得越来越重要。React Router 支持两种主要路由模式——History 模式和 Hash 模式[^4]。前者依赖于 HTML5 History API 实现平滑过渡效果，后者则依靠 URL 锚点变化驱动视图切换过程。 ```javascript // 创建 history 路由器实例 import { createBrowserRouter } from 'react-router-dom'; const router = createBrowserRouter([ { path: '/', element: <Home /> }, { path: '/about', element: <About /> } ]); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值