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

目录：

  1. 课程说明
  2. 一级路由
  3. 重定向
  4. NavLink高亮
  5. useRoutes路由表
  6. 嵌套路由
  7. 路由的params参数
  8. 路由的search参数
  9. 路由的state参数
  10. 编程式路由导航
  11. useRouterContext
  12. useNavigationType
  13. useOutlet
  14. useResolvedPath()
  15. 总结
  16. 项目地址

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/>等。
    • ⒉.语法的变化: component={About]变为element={<About/>}等。
    • 3.新增多个hook: useParams 、useNavigate 、useMatch 等。
    • 4.官方明确推荐函数式组件了!!!

2.一级路由 

About.jsx

import React from 'react';

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

export default About;

Home.jsx

import React from 'react';

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

export default Home;

 App.js

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 (
        <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></About>}></Route>
                                <Route path="/home" element={<Home></Home>}></Route>
                            </Routes>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

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(
    <BrowserRouter>
        <App/>
    </BrowserRouter>
);

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 (
        <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" caseSensitive element={<About></About>}></Route>
                                <Route path="/home" element={<Home></Home>}></Route>
                                <Route path="/" element={<Navigate to="/about"/>}></Route>
                            </Routes>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

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 (
        <div>
            <h3>我是Home的内容</h3>
            {sum === 2 ? <Navigate to="/about/" replace={true}/> : <h4>当前sum的值是：{sum}</h4>}
            <button onClick={() => setSum(2)}>点我将sum变为2</button>
        </div>
    );
}

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 (
        <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></About>}></Route>
                                <Route path="/home" element={<Home></Home>}></Route>
                                <Route path="/" element={<Navigate to="/about"/>}></Route>
                            </Routes>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

 About.jsx

import React from 'react';

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

export default About;

Home.jsx

import React from 'react';

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

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: <About></About>
    },
    {
        path: '/home',
        element: <Home></Home>
    },
    {
        path: '/',
        element: <Navigate to="/about"></Navigate>
    },
]

 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 (
        <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></About>}></Route>*/}
                            {/*    <Route path="/home" element={<Home></Home>}></Route>*/}
                            {/*    <Route path="/" element={<Navigate to="/about"/>}></Route>*/}
                            {/*</Routes>*/}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

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 (
        <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></About>}></Route>*/}
                            {/*    <Route path="/home" element={<Home></Home>}></Route>*/}
                            {/*    <Route path="/" element={<Navigate to="/about"/>}></Route>*/}
                            {/*</Routes>*/}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

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: <About></About>
    },
    {
        path: '/home',
        element: <Home></Home>,
        children: [
            {
                path: 'news',
                element: <News></News>
            },
            {
                path: 'message',
                element: <Message></Message>
            }
        ]
    },
    {
        path: '/',
        element: <Navigate to="/about"></Navigate>
    },
]

News.jsx

import React from 'react';

function News(props) {
    return (
        <div>
            <ul>
                <li>news001</li>
                <li>news002</li>
                <li>news003</li>
            </ul>
        </div>
    );
}

export default News;

Message.jsx

import React from 'react';

function Message(props) {
    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>
    );
}

export default Message;

Home.jsx

import React from 'react';
import {NavLink, Outlet} from "react-router-dom";

function Home(props) {
    return (
        <div>
            <h2>Home组件内容</h2>
            <div>
                <ul className="nav nav-tabs">
                    <li>
                        <NavLink className="list-group-item" to="news">News</NavLink>
                        {/*<NavLink className="list-group-item" to="./news">News</NavLink>*/}
                        {/*<NavLink className="list-group-item" to="/home/news">News</NavLink>*/}
                    </li>
                    <li>
                        <NavLink className="list-group-item " to="message">Message</NavLink>
                        {/*<NavLink className="list-group-item " to="./message">Message</NavLink>*/}
                        {/*<NavLink className="list-group-item " to="/home/message">Message</NavLink>*/}
                    </li>
                </ul>
                <Outlet></Outlet>
            </div>
        </div>
    );
}

export default Home;

About.jsx

import React from 'react';

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

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 (
        <div>
            <ul>
                <li>消息编号：{id}</li>
                <li>消息标题：{title}</li>
                <li>消息内容:{content}</li>
            </ul>
        </div>
    );
}

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 (
        <div>
            <ul>
                {
                    messages.map((m) => {
                        return (
                            <li key={m.id}>
                                <Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>&nbsp;&nbsp;
                            </li>
                        )
                    })
                }
            </ul>
            <hr></hr>
            <Outlet></Outlet>
        </div>
    );
}

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: <About></About>
    },
    {
        path: '/home',
        element: <Home></Home>,
        children: [
            {
                path: 'news',
                element: <News></News>
            },
            {
                path: 'message',
                element: <Message></Message>,
                children: [
                    {
                        path: 'detail/:id/:title/:content',
                        element: <Detail></Detail>
                    }
                ]
            }
        ]
    },
    {
        path: '/',
        element: <Navigate to="/about"></Navigate>
    },
]

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 (
        <div>
            <ul>
                <li>
                    <button onClick={() => setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数
                    </button>
                </li>
                <li>消息编号：{id}</li>
                <li>消息标题：{title}</li>
                <li>消息内容：{content}</li>
            </ul>
        </div>
    );
}

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 (
        <div>
            <ul>
                {
                    messages.map((m) => {
                        return (
                            <li key={m.id}>
                                {/*<Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>&nbsp;&nbsp;*/}
                                <Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
                                &nbsp;&nbsp;
                            </li>
                        )
                    })
                }
            </ul>
            <hr></hr>
            <Outlet></Outlet>
        </div>
    );
}

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: <About></About>
    },
    {
        path: '/home',
        element: <Home></Home>,
        children: [
            {
                path: 'news',
                element: <News></News>
            },
            {
                path: 'message',
                element: <Message></Message>,
                children: [
                    {
                        path: 'detail',
                        element: <Detail></Detail>
                    }
                ]
            }
        ]
    },
    {
        path: '/',
        element: <Navigate to="/about"></Navigate>
    },
]

9.路由的state参数

Detail.jsx

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

function Detail(props) {
    const {state: {id, title, content}} = useLocation()

    return (
        <div>
            <ul>
                <li>消息编号：{id}</li>
                <li>消息标题：{title}</li>
                <li>消息内容：{content}</li>
            </ul>
        </div>
    );
}

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 (
        <div>
            <ul>
                {
                    messages.map((m) => {
                        return (
                            <li key={m.id}>
                                {/*<Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>&nbsp;&nbsp;*/}
                                {/*<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>*/}
                                <Link to="detail"
                                      state={{id: m.id, title: m.title, content: m.content}}>{m.title}</Link>
                                &nbsp;&nbsp;
                            </li>
                        )
                    })
                }
            </ul>
            <hr></hr>
            <Outlet></Outlet>
        </div>
    );
}

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: <About></About>
    },
    {
        path: '/home',
        element: <Home></Home>,
        children: [
            {
                path: 'news',
                element: <News></News>
            },
            {
                path: 'message',
                element: <Message></Message>,
                children: [
                    {
                        path: 'detail',
                        element: <Detail></Detail>
                    }
                ]
            }
        ]
    },
    {
        path: '/',
        element: <Navigate to="/about"></Navigate>
    },
]

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 (
        <div>
            <div className="col-xs-offset-2 col-xs-8">
                <div className="page-header">
                    <h2>React Router Demo</h2>
                    <button onClick={back}>后退</button>
                    <button onClick={forward}>前进</button>
                </div>
            </div>
        </div>
    );
}

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 (
        <div>
            <ul>
                {
                    messages.map((m) => {
                        return (
                            <li key={m.id}>
                                {/*<Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>&nbsp;&nbsp;*/}
                                {/*<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>*/}
                                <Link to="detail"
                                      state={{id: m.id, title: m.title, content: m.content}}>{m.title}</Link>
                                <button onClick={() => showDetail(m)}>查看详情</button>
                            </li>
                        )
                    })
                }
            </ul>
            <hr></hr>
            <Outlet></Outlet>
        </div>
    );
}

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 (
        <div>
            <div className="row">
                <Header></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" to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/*<Routes>*/}
                            {/*    <Route path="/about" element={<About></About>}></Route>*/}
                            {/*    <Route path="/home" element={<Home></Home>}></Route>*/}
                            {/*    <Route path="/" element={<Navigate to="/about"/>}></Route>*/}
                            {/*</Routes>*/}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

11.useRouterContext

  • uselnRouterContext()
  • 作用:如果组件在<Router>的上下文中呈现，则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(
    <Demo></Demo>,
    <BrowserRouter>
        <App/>
    </BrowserRouter>
);

 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 (
        <div>
            <div className="row">
                <Header></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" to="/home">Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/*<Routes>*/}
                            {/*    <Route path="/about" element={<About></About>}></Route>*/}
                            {/*    <Route path="/home" element={<Home></Home>}></Route>*/}
                            {/*    <Route path="/" element={<Navigate to="/about"/>}></Route>*/}
                            {/*</Routes>*/}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

Demo.jsx

import React from 'react';
import {useInRouterContext} from "react-router-dom";

function Demo(props) {
    console.log(useInRouterContext())
    return (
        <div>
            demo
        </div>
    );
}

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 (
        <div>
            <div className="col-xs-offset-2 col-xs-8">
                <div className="page-header">
                    <h2>React Router Demo</h2>
                    <button onClick={back}>后退</button>
                    <button onClick={forward}>前进</button>
                </div>
            </div>
        </div>
    );
}

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 (
        <div>
            <ul>
                <li>news001</li>
                <li>news002</li>
                <li>news003</li>
            </ul>
        </div>
    );
}

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 (
        <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></Outlet>
            </div>
        </div>
    );
}

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 (
        <div>
            <ul>
                <li>news001</li>
                <li>news002</li>
                <li>news003</li>
            </ul>
        </div>
    );
}

export default News;

15.总结：

2.Component

1. <BrowserRouter>

  • 说明:<BrowserRouter>用于包裹整个应用。
  • 示例代码:
  • import React from "react";
import ReactDOM from "react-dom" ;
import { BrowserRouter } from "react-router-dom" ;

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

2.<HashRouter>

  • 说明:作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。
  • 备注: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. <cRoute也可以嵌套使用，且可配合useRoutes()配置“路由表”，但需要通过<outlet>组件来渲染其子路由。
  7. 示例代码:

4.<Link>

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

5.<NavLink>

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

 

6.<Navigate>

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

 

7. <outlet>

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

1.useRoutes()

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/115566.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

全方位移动机器人 SolidWorks 转 URDF 并在 Rviz 中仿真

全方位移动机器人 SolidWorks 转 URDF 并在 Rviz 中仿真

全方位移动机器人 SolidWorks 转 URDF 并在 Rviz 中仿真 参考 solidworks转URDF&#xff0c;并且在rviz中仿真 从solidworks导出URDF模型 Export a SolidWorks Assembly to URDF Solidworks模型导出urdf SolidWorks 模型简化 将整车除车轮部分另存为零件&#xff0c;作为一个…
阅读更多...
01｜LangChain | 从入门到实战-介绍

01｜LangChain | 从入门到实战-介绍

​ ​ by&#xff1a;wenwenc9 一、基本知识储备 1、什么是大模型&#xff0c;LLM&#xff1f; 大模型(Large Language Model)是近年来一个很热门的研究方向。 使用大量的数据训练出一个非常大的模型。一般是数十亿到上万亿的参数规模。 这些大模型可以捕捉到非常复杂的语言…
阅读更多...
构建强大的Web应用之Django详解

构建强大的Web应用之Django详解

引言&#xff1a; Django是一个功能强大且灵活的Python Web框架&#xff0c;它提供了一套完整的工具和功能&#xff0c;帮助开发者快速构建高效的Web应用。本篇文章将带您逐步了解Django的基本概念和使用方法&#xff0c;并通过实际的代码案例&#xff0c;帮助您从零开始构建自…
阅读更多...
MSQL系列(十三) Mysql实战-left/right/inner join 使用详解及索引优化

MSQL系列(十三) Mysql实战-left/right/inner join 使用详解及索引优化

Mysql实战-left/right/inner join 使用详解及索引优化 前面我们讲解了BTree的索引结构&#xff0c;也详细讲解下Join的底层驱动表 选择原理&#xff0c;今天我们来了解一下为什么会出现内连接外连接&#xff0c;两种连接方式&#xff0c;另外实战一下内连接和几种最常用的join…
阅读更多...
在IDEA运行spark程序（搭建Spark开发环境）

在IDEA运行spark程序（搭建Spark开发环境）

建议大家写在Linux上搭建好Hadoop的完全分布式集群环境和Spark集群环境&#xff0c;以下在IDEA中搭建的环境仅仅是在window系统上进行spark程序的开发学习&#xff0c;在window系统上可以不用安装hadoop和spark&#xff0c;spark程序可以通过pom.xml的文件配置&#xff0c;添加…
阅读更多...
python创建一个简单的flask应用

python创建一个简单的flask应用

下面用python在本地和服务器上分别创建一个简单的flask应用&#xff1a; 1.在pc本地 1&#xff09;pip flask后创建一个简单的脚本flask_demo.py from flask import Flaskapp Flask(__name__)app.route(/) def hello_world():return Hello, World!winR进入命令行&#xff0c;…
阅读更多...
Envoy XDS协议学习

Envoy XDS协议学习

Envoy xds学习 资料地址 envoy官网资料连接 接口说明 xds分为增量接口和全量接口SotW&#xff1a;state of the world 即全量的数据Incremental&#xff1a; 增量的数据 具体接口 Listener: Listener Discovery Service (LDS) SotW: ListenerDiscoveryService.StreamList…
阅读更多...
跳跳狗小游戏

跳跳狗小游戏

欢迎来到程序小院 跳跳狗 玩法&#xff1a;一直弹跳的狗狗&#xff0c;鼠标点击屏幕左右方向键进行弹跳&#xff0c;弹到不同物品会有不同的分数减扣&#xff0c;规定的时间3分钟内完成狗狗弹跳&#xff0c;快去跳跳狗吧^^。开始游戏https://www.ormcc.com/play/gameStart/198…
阅读更多...
飞书开发学习笔记(一)-应用创建和测试

飞书开发学习笔记(一)-应用创建和测试

飞书开发学习笔记(一)-应用创建和测试 一.前言 现在大企业用的办公IM软件中,飞书是口碑最好的&#xff0c;不得不说&#xff0c;字节在开发产品方面&#xff0c;确实有自己独到的竞争力&#xff0c;比如说抖音、头条、飞书。在办公会议和云文档的体验上&#xff0c;其它的办公…
阅读更多...
实验四: Android 资源访问

实验四: Android 资源访问

实验四: Android 资源访问 4.1 实验目的 本次实验的目的是让大家熟悉 Android 中的资源&#xff0c;资源指的是代码中使用 的外部文件&#xff0c;这些文件作为应用程序的一部分&#xff0c;被编译到应用程序中。 4.2 实验要求 掌握字符串资源&#xff0c;颜色资源和尺寸资源…
阅读更多...
第五部分：Tomcat

第五部分：Tomcat

5.1&#xff1a;JavaWeb 5.1.1&#xff1a;JavaWeb的概念 ①什么是JavaWeb? JavaWeb是指所有通过Java语言编写可以通过浏览器访问的程序的总称 JavaWeb是基于请求和响应来开发的 ②什么是请求&#xff1f; 请求是指客户端给服务器发送数据&#xff0c;叫请求Request ③什么是…
阅读更多...
时空智友企业流程化管控系统文件存在任意文件上传漏洞

时空智友企业流程化管控系统文件存在任意文件上传漏洞

时空智友企业流程化管控系统文件存在任意文件上传漏洞 免责声明漏洞描述漏洞影响漏洞危害网络测绘Fofa: app"时空智友V10.1" 漏洞复现1. 构造poc2. 发送数据包&#xff0c;上传文件3. 访问webshellwebshell地址 免责声明 仅用于技术交流,目的是向相关安全人员展示漏…
阅读更多...
NUUO网络摄像头(NVR)RCE漏洞复现

NUUO网络摄像头(NVR)RCE漏洞复现

简介 NUUO Network Video Recorder&#xff08;NVR&#xff09;是中国台湾NUUO公司的一款网络视频记录器。 NUUO NVR视频存储管理设备的__debugging_center_utils___.php文件存在未授权远程命令执行漏洞&#xff0c;攻击者可在没有任何权限的情况下通过log参数执行任意命令。…
阅读更多...
【产品经理从0到1】ID（工业设计）知识构建

【产品经理从0到1】ID（工业设计）知识构建

目录 一、ID知识架构思维导图 ​二、3D打印设计工具 导语&#xff1a;作为一个硬件产品经理&#xff0c;虽然不需要自己进行工业设计&#xff0c;但是若要对产品外观和品质细节进行更深入和准确的把控&#xff0c;就需要了解工业设计的相关知识。 一、ID知识架构思维导图 二、…
阅读更多...
JavaScript(WebAPI)

JavaScript(WebAPI)

文章目录 什么是WebAPIDOM 基本概念DOM 树事件 操作元素获取/修改元素内容获取/修改元素属性获取/修改表单元素属性获取/修改样式属性 网页版猜数字游戏实现一个表白墙 什么是WebAPI 前面学习的 JS 分成三个大的部分 ECMAScript: 基础语法部分DOM API: 操作页面结构BOM API: …
阅读更多...
两天实现思维导图的协同编辑？用Yjs真的可以

两天实现思维导图的协同编辑？用Yjs真的可以

最近使用 Yjs 给自己开源的一个思维导图加上了协同编辑的功能&#xff0c;得益于该框架的强大&#xff0c;一直觉得很复杂的协同编辑能力没想到实现起来异常的简单&#xff0c;所以通过本文来安利给各位。 要实现协同编辑&#xff0c;目前主要有两种算法&#xff0c;一是 OT&a…
阅读更多...
关于Intel Press出版的《Bedyong BIOS》第2版的观后感

关于Intel Press出版的《Bedyong BIOS》第2版的观后感

文章目录 此书的背景UEFI运行时DXE基础CPU架构协议PCI协议UEFI驱动的初始化串口DXE驱动示例 《Beyond BIOS》首先介绍一个简单的UEFI应用程序模块&#xff0c;用于展示UEFI应用程序的行为。作者为Waldo。该模块名为“InitializeHelloApplication”&#xff0c;它接受两个参数&a…
阅读更多...
【Mysql】Mysql中表连接的原理

【Mysql】Mysql中表连接的原理

连接简介 在实际工作中&#xff0c;我们需要查询的数据很可能不是放在一张表中&#xff0c;而是需要同时从多张表中获取。下面我们以简单的两张表为例来进行说明。 连接的本质 为方便测试说明&#xff0c;&#xff0c;先创建两个简单的表并给它们填充一点数据&#xff1a; …
阅读更多...
保障效率与可用，分析Kafka的消费者组与Rebalance机制

保障效率与可用，分析Kafka的消费者组与Rebalance机制

系列文章目录 上手第一关&#xff0c;手把手教你安装kafka与可视化工具kafka-eagle Kafka是什么&#xff0c;以及如何使用SpringBoot对接Kafka 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析&#xff0c;打破面试难关 防止消息丢失与消息重复——Kafka可…
阅读更多...
react+canvas实现横跨整个页面的动态的波浪线（贝塞尔曲线）

react+canvas实现横跨整个页面的动态的波浪线（贝塞尔曲线）

本来写这个特效 我打算用css实现的&#xff0c;结果是一波三折&#xff0c;我太难了&#xff0c;最终没能用css实现&#xff0c;转战了canvas来实现。来吧先看效果图 当然这个图的波浪高度、频率、位置、速度都是可调的&#xff0c;请根据自己的需求调整&#xff0c;如果你讲波…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站