react路由：路由传参params、search、state

最新推荐文章于 2024-07-18 17:30:12 发布

原创

最新推荐文章于 2024-07-18 17:30:12 发布 · 749 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端 #前端框架 #react

本文详细介绍了在React项目中如何进行路由参数传递，包括params、search和state三种方式，涵盖了从一级到三级路由的场景。通过实例展示了如何在组件中获取和使用这些参数，特别是使用search时如何结合query-string库解析URL查询字符串。此外，还提供了完整的工程目录结构和关键代码片段，以及运行效果的静态图示例。

`react路由：`路由传参params、search、state(含二级路由和三级路由)

`一、准备工作：`

1、创建myProject05-router目录

2、创建清单文件， npm init -y

3、安装第三方依赖包，npm install react react-dom react-scripts react-router-dom@5 --save

4、创建public文件夹，在该文件夹下创建index.html

5、创建src文件夹，在该文件夹下创建：

（1）入口文件index.js

（2）组件App.js和App.css文件

（3）pages文件夹，在该文件夹下创建Home文件夹

（4）Home文件夹下创建Cates文件夹(Cates.jsx)、Goods文件夹（Goods.jsx、Goods.css、Detail文件夹（Detail.jsx））、Home.jsx、Home.css

（5）About.jsx、Resolve.jsx

6、工程目录：
请添加图片描述

`二、编写代码：`

1、index.html：

<div id="root"></div>

2、index.js：

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, {
   
    Component } from 'react'
import {
   
   NavLink, Redirect, Route, Switch} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home/Home'
import Resovle from './pages/Resovle'
import './App.css'

export default class App extends Component {
   
   
  render() {
   
   
    return (
      <div className