2.React框架之函数组件路由及参数传递React-Router（V6）

风_Sux123

已于 2023-03-14 10:01:14 修改

阅读量1.5k

点赞数 3

分类专栏： React学习记录文章标签： react.js 前端 javascript

于 2023-02-13 22:42:29 首次发布

本文链接：https://blog.csdn.net/qq_44438941/article/details/129018373

版权

React学习记录专栏收录该内容

21 篇文章 1 订阅

订阅专栏

安装react-router

npm install --save react-router-dom

1.统一配置路由表生成规则

1.1index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
        	<App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById('root')
);

1.2 App.js-----获取路由表，根据路由表生成对应路由

import './App.css';
import React from "react";
import routes from './router/index'
import {useRoutes} from "react-router";

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

1.3 router/index.js-----路由表

import Home from "../pages/home";
import Details from "../pages/details";
import Mine from "../pages/mine";
import {Navigate} from "react-router";
import Params from "../pages/params";
import SearchRoute from '../pages/search'
import StateRoute from "../pages/state";
import Demo from "../pages/demo";
const routes=[
    {
        path:'/demo',
        element:<Demo/>,
        children: [
            {
                path:'params/:id/:title/:content',
                element:<Params/>,
            },
            {
                path:'search',
                element:<SearchRoute/>,
            },
            {
                path:'state',
                element:<StateRoute/>,
            },
        ]
    },
    {
        path:'/home',
        exact:true,
        element:<Home/>,
        children:[
            {
                path:'details',
                element:<Details/>,
            }
        ],
    },
    {
        path:'/details',
        element:<Details/>,
    },
    {
        path:'/mine',
        element:<Mine/>,
    },

    {
        path: '*',
        element: <Navigate to="/demo"/>
    },

]
export default routes

2.路由参数传递

2.1传递params参数并实现跳转

传递参数

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

export default function Demo(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>
            <h2>params参数</h2>
            <ul>
                {
                    messages.map((item,index)=>{
                        return (
                            <li key={item.id}>
                                <Link to={`params/${item.id}/${item.title}/${item.content}`}>params跳转并携带参数</Link>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/*Outlet：用于展示子路由*/}
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    );
}

接收参数

import React from 'react';
import {useParams} from "react-router";

export default function Params(props) {
    console.log(useParams())
    const params=useParams()
    return (
        <div>
            params路由数据展示
            <h3>params：id:{params.id}---name:{params.title}</h3>
        </div>
    );
}

2.2 传递search参数并实现跳转

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

export default function Demo(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>
            <h2>search参数</h2>
            <ul>
                {
                    messages.map((item,index)=>{
                        return (
                            <li key={item.id}>
                                <Link to={`search?id=${item.id}&title=${item.title}&content=${item.content}`}>search跳转并携带参数</Link>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/*Outlet：用于展示子路由*/}
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    );
}

接收参数

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

export default function SearchRoute(props) {
    const [search,setSearch]=useSearchParams()
    return (
        <div>
            search路由数据展示
            <br/>
            <h3>search路由携带数据：id:{search.get('id')}---name:{search.get('title')}</h3>
        </div>
    );
}

2.3 传递state参数并实现跳转

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

export default function Demo(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>
            <h2>state参数</h2>
            <ul>
                {
                    messages.map((item,index)=>{
                        return (
                            <li key={item.id}>
                                <Link
                                    to="state"
                                    state={{
                                        id:item.id,
                                        title:item.title,
                                        content:item.content,
                                    }}
                                >state跳转并携带参数</Link>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/*Outlet：用于展示子路由*/}
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    );
}

接收参数

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

export default function StateRoute(props) {
    console.log(useLocation())
    const {state:{id,title}}=useLocation()
    return (
        <div>
            state路由数据展示
            <br/>
            <h3>state路由携带数据：id:{id}---name:{title}</h3>
        </div>
    );
}

3.编程式路由导航

3.1传递params参数并实现跳转

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

export default function Demo(props) {
    const navigate = useNavigate()
    const [messages] = useState([
        {id:'001',title:'消息1',content:'锄禾日当午'},
        {id:'002',title:'消息2',content:'汗滴禾下土'},
        {id:'003',title:'消息3',content:'谁知盘中餐'},
        {id:'004',title:'消息4',content:'粒粒皆辛苦'}
    ])
    function toParams(item) {
        navigate(`params/${item.id}/${item.title}/${item.content}`,{
            replace:false,
        })
    }
    return (
        <div>
            <h2>params参数</h2>
            <ul>
                {
                    messages.map((item,index)=>{
                        return (
                            <li key={item.id}>
                                <button onClick={()=>toParams(item)}>params跳转并携带参数</button>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/*Outlet：用于展示子路由*/}
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    );
}

3.2 传递search参数并实现跳转

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

export default function Demo(props) {
    const navigate = useNavigate()
    const [messages] = useState([
        {id:'001',title:'消息1',content:'锄禾日当午'},
        {id:'002',title:'消息2',content:'汗滴禾下土'},
        {id:'003',title:'消息3',content:'谁知盘中餐'},
        {id:'004',title:'消息4',content:'粒粒皆辛苦'}
    ])
    function toSearch(item) {
        return ()=>{
            navigate(`search?id=${item.id}&title=${item.title}&content=${item.content}`,{
                replace:true
            })
        }
    }
    return (
        <div>
            <h2>search参数</h2>
            <ul>
                {
                    messages.map((item,index)=>{
                        return (
                            <li key={item.id}>
                                <button onClick={toSearch(item)}>search跳转并携带参数</button>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/*Outlet：用于展示子路由*/}
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    );
}

3.3 传递state参数并实现跳转

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

export default function Demo(props) {
    const navigate = useNavigate()
    const [messages] = useState([
        {id:'001',title:'消息1',content:'锄禾日当午'},
        {id:'002',title:'消息2',content:'汗滴禾下土'},
        {id:'003',title:'消息3',content:'谁知盘中餐'},
        {id:'004',title:'消息4',content:'粒粒皆辛苦'}
    ])
    function toState(item) {
        navigate('state',{
            replace:false,
            state:{
                id:item.id,
                title:item.title,
                content:item.content
            }
        })
    }
    return (
        <div>
            <h2>state参数</h2>
            <ul>
                {
                    messages.map((item,index)=>{
                        return (
                            <li key={item.id}>
                                <button onClick={()=>toState(item)}>state跳转并携带参数</button>
                            </li>
                        )
                    })
                }
            </ul>
            <hr />
            {/*Outlet：用于展示子路由*/}
            {/* 指定路由组件的展示位置 */}
            <Outlet />
        </div>
    );
}