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

news2024/11/25 3:05:55

目录：

  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.coloradmin.cn/o/1171028.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++】红黑树模拟实现STL中的map与set

【C++】红黑树模拟实现STL中的map与set

红黑树里面具体存的是什么类型的元素&#xff0c;是由模板参数 T 来决定&#xff1a; 如果 T 是 Key 那么就是 set。 如果 T 是 pair<const Key, V>&#xff0c;那么就是 map。 1、定义红黑树的节点结构 // 定义红黑颜色 enum Colour {RED,BLACK };template<class …
阅读更多...
memcpy()之小端模式

memcpy()之小端模式

函数原型 void memcpy(voiddestin, const void *src, size_t n); 功能 由src指向地址为起始地址的连续n个字节的数据复制到以destin指向地址为起始地址的空间内。 头文件 #include<string.h> 返回值 函数返回一个指向dest的指针。 例1&#xff1a;如果用来复制字…
阅读更多...
wordpress版本识别

wordpress版本识别

wordpress版本识别 1.通过RSS Feed识别 RSS Feed参考 访问网站/feed或者?feedrss 例如 默认结构&#xff1a;https://www.example.com/?feedrss2 其他结构&#xff1a;https://www.example.com/feed/ 返回结果中搜索 generator 可以看到直接是5.9.7版本 2.wpscan等工具扫一…
阅读更多...
Java8 Stream API全面解析——高效流式编程的秘诀

Java8 Stream API全面解析——高效流式编程的秘诀

文章目录 什么是 Stream Api?快速入门流的操作创建流中间操作filter 过滤map 数据转换flatMap 合并流distinct 去重sorted 排序limit 限流skip 跳过peek 操作 终结操作forEach 遍历forEachOrdered 有序遍历count 统计数量min 最小值max 最大值reduce 聚合collect 收集anyMatch…
阅读更多...
用WebStorm运行VUE项目

用WebStorm运行VUE项目

提示&#xff1a;原来用VS Code开Vue&#xff0c;可是VS Code用Ctrl打不开国际化&#xff0c;下载推荐插件也不好使 文章目录 下载WebStorm运行WebStorm实用插件 下载WebStorm 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; https://www.jetbrains.com/webs…
阅读更多...
国家管网集团古浪—河口天然气联络管道工程实现投产

国家管网集团古浪—河口天然气联络管道工程实现投产

10月26日&#xff0c;国家管网集团古浪—河口天然气联络管道工程实现“绿色”投产&#xff0c;进一步完善西北地区多通道供气网络&#xff0c;对于推动甘肃省“一核三带”新发展格局构建、提高“全国一张网”在甘青地区的供应保障能力具有重要意义。 古浪—河口天然气联络管道…
阅读更多...
SpringBoot条件注解底层原理

SpringBoot条件注解底层原理

一、简介 相信大家在学springBoot自动装配的时候会遇到下面这些条件注解&#xff0c;当存在其指定的条件&#xff0c;才会把对应的bean注入到IOC容器中。本博客旨在揭开其神秘的面纱&#xff01; 其实说白了&#xff0c;springBoot的这些注解只是针对普通spring框架中Conditi…
阅读更多...
JSP 学生成绩查询管理系统eclipse开发sql数据库serlvet框架bs模式java编程MVC结构

JSP 学生成绩查询管理系统eclipse开发sql数据库serlvet框架bs模式java编程MVC结构

一、源码特点 JSP 学生成绩查询管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;比较流行的servlet框架系统具有完整的源代码和数据库&#xff0c;eclipse开发系统主要采用B/S模式 开发。 java 学生成绩查询管理系统 代码下载链接…
阅读更多...
CorelDRAW2023最新版本号24.5.0.731

CorelDRAW2023最新版本号24.5.0.731

CDR2023是一款近年来备受瞩目的工具软件&#xff0c;它提供了数据存储、分析以及处理的能力。但是&#xff0c;对于许多用户来说&#xff0c;CDR2023到底好用不好用还需要进行深入的分析和探讨。在本文中&#xff0c;我们将从多个角度分析CDR2023这款软件。 CorelDRAW2023版win…
阅读更多...
【JMeter参数化】上一个接口返回作为下一个接口入参

【JMeter参数化】上一个接口返回作为下一个接口入参

前言： 实际工作场景当中，比如获取到商品列表，并查看商品详情。如果将商品id写死，就很笨拙。所以我们可以进行参数化动态去更新商品id 目录 场景1:接口A仅取一个值，作为接口B的入参 场景：接口A是获取教师列表中某个教室的id，接口B是查看该教师的详情页步骤： 1.获取接口…
阅读更多...
DC系列 DC:4

DC系列 DC:4

DC:4 靶机 文章目录 DC:4 靶机信息收集IP端口收集网页信息收集网站信息收集bp爆破 反弹shellnc反弹 内网信息收集收集jim用户的密码密码爆破 Charles用户密码收集 提权teehee提权 备注 信息收集 IP端口收集 用arp-scan 网段锁定ip nmap对端口服务进行详细扫描nmap -p- -sV …
阅读更多...
图片复制上传，拖拽输入框上传，el-upload自定义上传方法（上传和备注框强关联）

图片复制上传，拖拽输入框上传，el-upload自定义上传方法（上传和备注框强关联）

1. 效果图&#xff1a; 2. 复制图片使用的方法&#xff1a; 1.通过监听paste方法&#xff0c;获取复制内容2.获取复制内容中的clipboardData3.获取file文件进行上传 <input paste.native"handlePaste" />handlePaste(value){let files value.clipboardData…
阅读更多...
win10 + vs2017 + cmake3.17编译tiff-4.0.9

win10 + vs2017 + cmake3.17编译tiff-4.0.9

前言&#xff1a; 需要先编译依赖库&#xff1a;zlib-1.2.11, jpeg-9b 我的安装根目录是&#xff1a;D:\Depend_3rd_party\tiffx64 1. 下载tiff-4.0.9.zip&#xff0c;并解压到根目录下 得到&#xff1a;D:\Depend_3rd_party\tiffx64\tiff-4.0.9 2. 创建build文件夹&#xff…
阅读更多...
链栈的练习

链栈的练习

链栈练习 相关内容&#xff1a;栈的链式存储结构&#xff08;链栈&#xff09; //链栈的初始化、判空、入栈、出栈、读取栈顶元素 //链栈的结点&#xff1a;数据域、指针域 #include<stdio.h> #include<stdlib.h> typedef int Status; #define OK 1 #define ERRO…
阅读更多...
二维码智慧门牌管理系统升级：实现一标六实数据管理

二维码智慧门牌管理系统升级：实现一标六实数据管理

文章目录 前言一、一标六实数据管理应用的关键特点二、一标六实数据管理应用的具体应用 前言 随着城市的发展&#xff0c;对基础数据的精确管理和快速查询需求日益增强。为满足这一需求&#xff0c;二维码智慧门牌管理系统进行了升级&#xff0c;提供一标六实数据管理应用&…
阅读更多...
全自动洗衣机什么牌子好？内衣洗衣机品牌排行榜前四名

全自动洗衣机什么牌子好？内衣洗衣机品牌排行榜前四名

随着内衣洗衣机的流行&#xff0c;很多小伙伴在纠结该不该入手一款内衣洗衣机&#xff0c;专门来洗一些贴身衣物&#xff0c;答案是非常有必要的&#xff0c;因为我们现在市面上的大型洗衣机只能做清洁&#xff0c;无法对我们的贴身衣物进行一个高强度的清洁&#xff0c;而小小…
阅读更多...
[自定义 Vue 组件] 小尾巴顶部导航栏(2.0) TailTopNav

[自定义 Vue 组件] 小尾巴顶部导航栏(2.0) TailTopNav

文章归档&#xff1a;https://www.yuque.com/u27599042/coding_star/oglrqteg8fzvvzn0 [自定义 Vue 组件] 响应式顶部导航栏(1.0) TopNav&#xff1a;https://www.yuque.com/u27599042/coding_star/hzltsltxgavwx8u2 组件效果示例 组件所依赖的子组件 [自定义 Vue 组件] 小尾巴…
阅读更多...
node插件express（路由）的基本使用（一）

node插件express（路由）的基本使用（一）

文章目录 一、express的了解1.定义2.作用3.使用express的前提条件&#xff08;1&#xff09;如果是新文件夹需要薪资package.json文件&#xff0c;如果有就忽略&#xff08;2&#xff09;安装第三方依赖包&#xff08;3&#xff09;在使用的地方导入express 二、express的基本使…
阅读更多...
原地封神！一个只用套模板即可制作电子相册的网站

原地封神！一个只用套模板即可制作电子相册的网站

对于忙碌的年轻人来说&#xff0c;一键操作的模板意味着无需复杂的操作步骤&#xff0c;就能轻松制作出精美的电子相册。 但是一个好的工具也是事关重要&#xff0c;最近发现了一款非常适合年轻人的模板---FLBOOK在线制作电子杂志平台&#xff0c;只需要找到合适的模板即可制作…
阅读更多...
【leetcode】26. 删除有序数组中的重复项（图解）

【leetcode】26. 删除有序数组中的重复项（图解）

目录 1. 思路&#xff08;图解&#xff09;2. 代码 题目链接&#xff1a; leetcode 26. 删除有序数组中的重复项 题目描述&#xff1a; 注意返回的是去重后的数组长度&#xff0c;但是输出的是去重后的数组元素。 1. 思路&#xff08;图解&#xff09; 思路&#xff1a;快慢…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023