[尚硅谷React笔记]——第9章 ReactRouter6

import React from 'react';
import {NavLink, Routes, Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
 
function App(props) {
    return (
        
            
"row">
                
"col-xs-offset-2 col-xs-8">
                    
"page-header">
React Router Demo
                

index.js

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

3.重定向

App.js

import React from 'react';
import {NavLink, Routes, Route, Navigate} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
 
function App(props) {
    return (
        
            
"row">
                
"col-xs-offset-2 col-xs-8">
                    
"page-header">
React Router Demo
                
            
            
"row">
                
"col-xs-2 col-xs-offset-2">
                    
"list-group">
                        "list-group-item" to="/about">About
                        "list-group-item" to="/home">Home
                    
                
                
"col-xs-6">
                    
"panel">
                        
"panel-body">
                            
                                "/ABOUT" caseSensitive element={}>
                                "/home" element={}>
                                "/" element={"/about"/>}>
                            
                        
                    
                
            
        
    );
}
 
export default App;

 Home.jsx

import React, {useState} from 'react';
import {Navigate} from "react-router-dom";
 
function Home(props) {
    const [sum, setSum] = useState(1)
    return (
        
            
我是Home的内容
            {sum === 2 ? "/about/" replace={true}/> : 
当前sum的值是：{sum}
}
             setSum(2)}>点我将sum变为2
        
    );
}
 
export default Home;

4.NavLink高亮

App.js

import React from 'react';
import {NavLink, Routes, Route, Navigate} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
 
function App(props) {
    function computedClassName({isActive}) {
        return isActive ? 'list-group-item atguigu' : 'list-group-item'
    }
 
    return (
        
            
"row">
                
"col-xs-offset-2 col-xs-8">
                    
"page-header">
React Router Demo
                
            
            
"row">
                
"col-xs-2 col-xs-offset-2">
                    
"list-group">
                        "/about">About
                        "/home">Home
                    
                
                
"col-xs-6">
                    
"panel">
                        
"panel-body">
                            
                                "/about" element={}>
                                "/home" element={}>
                                "/" element={"/about"/>}>
                            
                        
                    
                
            
        
    );
}
 
export default App;

 About.jsx

import React from 'react';
 
function About(props) {
    return (
        
            
我是About的内容
        
    );
}
 
export default About;

Home.jsx

import React from 'react';
 
function Home(props) {
    return (
        
            
我是Home的内容
        
    );
}
 
export default Home;

5.useRoutes路由表

route/index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
 
export default [
    {
        path: '/about',
        element: 
    },
    {
        path: '/home',
        element: 
    },
    {
        path: '/',
        element: "/about">
    },
]

 App.js

import React from 'react';
import {NavLink, useRoutes} from "react-router-dom";
import routes from "./routes";
 
function App(props) {
    const element = useRoutes(routes)
    return (
        
            
"row">
                
"col-xs-offset-2 col-xs-8">
                    
"page-header">
React Router Demo
                
            
            
"row">
                
"col-xs-2 col-xs-offset-2">
                    
"list-group">
                        "list-group-item" to="/about">About
                        "list-group-item" to="/home">Home
                    
                
                
"col-xs-6">
                    
"panel">
                        
"panel-body">
                            {/**/}
                            {/*    "/about" element={}>*/}
                            {/*    "/home" element={}>*/}
                            {/*    "/" element={"/about"/>}>*/}
                            {/**/}
                            {element}
                        
                    
                
            
        
    );
}
 
export default App;

 6.嵌套路由

 App.js

import React from 'react';
import {NavLink, useRoutes} from "react-router-dom";
import routes from "./routes";
 
function App(props) {
    const element = useRoutes(routes)
    return (
        
            
"row">
                
"col-xs-offset-2 col-xs-8">
                    
"page-header">
React Router Demo
                
            
            
"row">
                
"col-xs-2 col-xs-offset-2">
                    
"list-group">
                        "list-group-item" to="/about">About
                        "list-group-item" end to="/home">Home
                    
                
                
"col-xs-6">
                    
"panel">
                        
"panel-body">
                            {/**/}
                            {/*    "/about" element={}>*/}
                            {/*    "/home" element={}>*/}
                            {/*    "/" element={"/about"/>}>*/}
                            {/**/}
                            {element}
                        
                    
                
            
        
    );
}
 
export default App;

route/index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import News from "../pages/News";
import Message from "../pages/Message";
 
export default [
    {
        path: '/about',
        element: 
    },
    {
        path: '/home',
        element: ,
        children: [
            {
                path: 'news',
                element: 
            },
            {
                path: 'message',
                element: 
            }
        ]
    },
    {
        path: '/',
        element: "/about">
    },
]

News.jsx

import React from 'react';
 
function News(props) {
    return (
        
            
                
news001
                
news002
                
news003
            
        
    );
}
 
export default News;

Message.jsx

import React from 'react';
 
function Message(props) {
    return (
        
            
                
                    "/message1">message001  
                
                
                    "/message2">message002  
                
                
                    "/message/3">message003  
                
            
        
    );
}
 
export default Message;

Home.jsx

import React from 'react';
import {NavLink, Outlet} from "react-router-dom";
 
function Home(props) {
    return (
        
            
Home组件内容
            
                
"nav nav-tabs">
                    
                        "list-group-item" to="news">News
                        {/*"list-group-item" to="./news">News*/}
                        {/*"list-group-item" to="/home/news">News*/}
                    
                    
                        "list-group-item " to="message">Message
                        {/*"list-group-item " to="./message">Message*/}
                        {/*"list-group-item " to="/home/message">Message*/}
                    
                
                
            
        
    );
}
 
export default Home;

About.jsx

import React from 'react';
 
function About(props) {
    return (
        
            
我是About的内容
        
    );
}
 
export default About;

7.路由的params参数

Detail.jsx

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

Message.jsx

import React, {useState} from 'react';
import {Link, Outlet} from "react-router-dom";
 
function Message(props) {
    const [messages] = useState([
        {id: '001', title: '消息1', content: '锄禾日当午'},
        {id: '002', title: '消息2', content: '汗滴禾下土'},
        {id: '003', title: '消息3', content: '谁知盘中餐'},
        {id: '004', title: '消息4', content: '粒粒皆辛苦'},
    ])
    return (
        
            
                {
                    messages.map((m) => {
                        return (
                            
                                ${m.id}/${m.title}/${m.content}`}>{m.title}  
                            
                        )
                    })
                }
            
            
            
        
    );
}
 
export default Message;

routes/index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
 
export default [
    {
        path: '/about',
        element: 
    },
    {
        path: '/home',
        element: ,
        children: [
            {
                path: 'news',
                element: 
            },
            {
                path: 'message',
                element: ,
                children: [
                    {
                        path: 'detail/:id/:title/:content',
                        element: 
                    }
                ]
            }
        ]
    },
    {
        path: '/',
        element: "/about">
    },
]

8.路由的search参数

Detail.jsx

import React from 'react';
import {useLocation, useSearchParams} from "react-router-dom";
 
function Detail(props) {
    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 (
        
            
                
                     setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数
                    
                
                
消息编号：{id}
                
消息标题：{title}
                
消息内容：{content}
            
        
    );
}
 
export default Detail;

Message.jsx

import React, {useState} from 'react';
import {Link, Outlet} from "react-router-dom";
 
function Message(props) {
    const [messages] = useState([
        {id: '001', title: '消息1', content: '锄禾日当午'},
        {id: '002', title: '消息2', content: '汗滴禾下土'},
        {id: '003', title: '消息3', content: '谁知盘中餐'},
        {id: '004', title: '消息4', content: '粒粒皆辛苦'},
    ])
    return (
        
            
                {
                    messages.map((m) => {
                        return (
                            
                                {/*${m.id}/${m.title}/${m.content}`}>{m.title}  */}
                                ${m.id}&title=${m.title}&content=${m.content}`}>{m.title}
                                  
                            
                        )
                    })
                }
            
            
            
        
    );
}
 
export default Message;

index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
 
export default [
    {
        path: '/about',
        element: 
    },
    {
        path: '/home',
        element: ,
        children: [
            {
                path: 'news',
                element: 
            },
            {
                path: 'message',
                element: ,
                children: [
                    {
                        path: 'detail',
                        element: 
                    }
                ]
            }
        ]
    },
    {
        path: '/',
        element: "/about">
    },
]

9.路由的state参数

Detail.jsx

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

Message.jsx

import React, {useState} from 'react';
import {Link, Outlet} from "react-router-dom";
 
function Message(props) {
    const [messages] = useState([
        {id: '001', title: '消息1', content: '锄禾日当午'},
        {id: '002', title: '消息2', content: '汗滴禾下土'},
        {id: '003', title: '消息3', content: '谁知盘中餐'},
        {id: '004', title: '消息4', content: '粒粒皆辛苦'},
    ])
    return (
        
            
                {
                    messages.map((m) => {
                        return (
                            
                                {/*${m.id}/${m.title}/${m.content}`}>{m.title}  */}
                                {/*${m.id}&title=${m.title}&content=${m.content}`}>{m.title}*/}
                                
                                      state={{id: m.id, title: m.title, content: m.content}}>{m.title}
                                  
                            
                        )
                    })
                }
            
            
            
        
    );
}
 
export default Message;

routes/index.js

import About from "../pages/About";
import Home from "../pages/Home";
import {Navigate} from "react-router-dom";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
 
export default [
    {
        path: '/about',
        element: 
    },
    {
        path: '/home',
        element: ,
        children: [
            {
                path: 'news',
                element: 
            },
            {
                path: 'message',
                element: ,
                children: [
                    {
                        path: 'detail',
                        element: 
                    }
                ]
            }
        ]
    },
    {
        path: '/',
        element: "/about">
    },
]

10.编程式路由导航

Header.jsx

import React from 'react';
import {useNavigate} from "react-router-dom";
 
function Header(props) {
    const navigate = useNavigate()
 
    function back() {
        navigate(-1)
    }
 
    function forward() {
        navigate(1)
    }
 
    return (
        
            
"col-xs-offset-2 col-xs-8">
                
"page-header">
                    
React Router Demo
                    后退
                    前进
                
            
        
    );
}
 
export default Header;

Message.jsx

import React, {useState} from 'react';
import {Link, Outlet, useNavigate} from "react-router-dom";
 
function Message(props) {
    const [messages] = useState([
        {id: '001', title: '消息1', content: '锄禾日当午'},
        {id: '002', title: '消息2', content: '汗滴禾下土'},
        {id: '003', title: '消息3', content: '谁知盘中餐'},
        {id: '004', title: '消息4', content: '粒粒皆辛苦'},
    ])
 
    const navigate = useNavigate()
 
    function showDetail(m) {
        navigate('detail', {replace: false, state: {id: m.id, title: m.title, content: m.content}})
    }
 
    return (
        
            
                {
                    messages.map((m) => {
                        return (
                            
                                {/*${m.id}/${m.title}/${m.content}`}>{m.title}  */}
                                {/*${m.id}&title=${m.title}&content=${m.content}`}>{m.title}*/}
                                
                                      state={{id: m.id, title: m.title, content: m.content}}>{m.title}
                                 showDetail(m)}>查看详情
                            
                        )
                    })
                }
            
            
            
        
    );
}
 
export default Message;

App.js

import React from 'react';
import {NavLink, useRoutes} from "react-router-dom";
import routes from "./routes";
import Header from "./components/Header";
 
function App(props) {
    const element = useRoutes(routes)
    return (
        
            
"row">
                
            
            
"row">
                
"col-xs-2 col-xs-offset-2">
                    
"list-group">
                        "list-group-item" to="/about">About
                        "list-group-item" to="/home">Home
                    
                
                
"col-xs-6">
                    
"panel">
                        
"panel-body">
                            {/**/}
                            {/*    "/about" element={}>*/}
                            {/*    "/home" element={}>*/}
                            {/*    "/" element={"/about"/>}>*/}
                            {/**/}
                            {element}
                        
                    
                
            
        
    );
}
 
export default App;

11.useRouterContext

• uselnRouterContext()
• 作用:如果组件在的上下文中呈现，则useInRouterContext钩子返回true，否则返回false。

index.js

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

 App.js

import React from 'react';
import {NavLink, useInRouterContext, useRoutes} from "react-router-dom";
import routes from "./routes";
import Header from "./components/Header";
 
function App(props) {
    const element = useRoutes(routes)
    console.log('@',useInRouterContext())
    return (
        
            
"row">
                
            
            
"row">
                
"col-xs-2 col-xs-offset-2">
                    
"list-group">
                        "list-group-item" to="/about">About
                        "list-group-item" to="/home">Home
                    
                
                
"col-xs-6">
                    
"panel">
                        
"panel-body">
                            {/**/}
                            {/*    "/about" element={}>*/}
                            {/*    "/home" element={}>*/}
                            {/*    "/" element={"/about"/>}>*/}
                            {/**/}
                            {element}
                        
                    
                
            
        
    );
}
 
export default App;

Demo.jsx

import React from 'react';
import {useInRouterContext} from "react-router-dom";
 
function Demo(props) {
    console.log(useInRouterContext())
    return (
        
            demo
        
    );
}
 
export default Demo;

 Header.jsx

import React from 'react';
import {useInRouterContext, useNavigate} from "react-router-dom";
 
function Header(props) {
    const navigate = useNavigate()
    console.log(useInRouterContext())
 
    function back() {
        navigate(-1)
    }
 
    function forward() {
        navigate(1)
    }
 
    return (
        
            
"col-xs-offset-2 col-xs-8">
                
"page-header">
                    
React Router Demo
                    后退
                    前进
                
            
        
    );
}
 
export default Header;

12.useNavigationType

• useNavigationType()
• 作用:返回当前的导航类型（(用户是如何来到当前页面的)。
• 返回值:POP、PUSH、REPLACE]。
• 备注:PoP是指在浏览器中直接打开了这个路由组件（刷新页面)。

 News.jsx

import React from 'react';
import {useNavigationType} from "react-router-dom";
 
function News(props) {
    console.log(useNavigationType())
    return (
        
            
                
news001
                
news002
                
news003
            
        
    );
}
 
export default News;

13.useOutlet

• useOutlet()
• 作用:用来呈现当前组件中要渲染的嵌套路由。
• 示例代码:

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

Home.jsx

import React from 'react';
import {NavLink, Outlet, useOutlet} from "react-router-dom";
 
function Home(props) {
    console.log(useOutlet())
    return (
        
            
Home组件内容
            
                
"nav nav-tabs">
                    
                        "list-group-item" to="news">News
                    
                    
                        "list-group-item " to="message">Message
                    
                
                
            
        
    );
}
 
export default Home;

14.useResolvedPath()

• useResolvedPath()
• 作用:给定一个URL值，解析其中的: path、search、hash值。 

News.jsx

import React from 'react';
import {useResolvedPath} from "react-router-dom";
 
function News(props) {
    console.log(useResolvedPath('/user?id=001&name=tom#qwe'))
    return (
        
            
                
news001
                
news002
                
news003
            
        
    );
}
 
export default News;

15.总结：

2.Component

1. 

• 说明:用于包裹整个应用。
• 示例代码:

• import React from "react";
  import ReactDOM from "react-dom" ;
  import { BrowserRouter } from "react-router-dom" ;
   
  ReactDOM.render(
  {/*整体结构（通常为App组件）*/}
   ,root
  );
  

2.

• 说明:作用与一样，但修改的是地址栏的hash值。
• 备注:6.x版本中、的用法与5.x相同。

3. 与

1. v6版本中移出了先前的，引入了新的替代者:。
2. 和要配合使用，且必须要用包裹。
3. 相当于一个if语句，如果其路径与当前URL匹配，则呈现其对应的组件。 
4. 属性用于指定:匹配时是否区分大小写(默认为false)。
5. 当URL发生变化时，都会查看其所有子元素以找到最佳匹配并呈现组件。
6. 组件来渲染其子路由。
7. 示例代码:
8. 

4.

• 作用:修改URL，且不发送网络请求(路由链接)。

5.

• 作用:与组件类似，且可实现导航的“高亮"效果。
• 示例代码: 

6.<Navigate>

• 作用:只要组件被渲染，就会修改路径，切换视图。
• replace属性用于控制跳转模式(push或 replace，默认是push) 。
• 示例代码: 

7.

• 当产生嵌套时，渲染其对应的后续子路由。

3.Hooks

1.useRoutes()

• 作用:根据路由表，动态创建和 。

2.useNavigate

• 作用:返回一个函数用来实现编程式导航。
• 示例代码: 

3. useParams()

• 作用:回当前匹配路由的params参数，类似于5.x中的match.params .
• 示例代码:

4.useSearchParams() 

• 作用:用于读取和修改当前位置的URL中的查询字符串。
• 返回一个包含两个值的数组，内容分别为:当前的seaech参数、更新search的函数。
• 示例代码:

5.useLocation()

• 作用:获取当前location信息，对标5.x中的路由组件的location属性。
• 示例代码: 

6.useMatch() 

• 作用:返回当前匹配信息，对标5.x中的路由组件的match属性。
• 示例代码:

16.项目地址

 https://gitee.com/coderPatrickStar/react/tree/master/20231003