我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

react如何复用组件?父组件如何给子组件传值?可能react新人面临着这些问题。在router里面有个outlet,这个outlet是用来做什么的呢?这也是本文要解决的问题。

苏南大叔:react教程,react路由如何传递参数?函数式组件接收参数 - react路由传参
react教程,react路由如何传递参数?函数式组件接收参数(图6-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,这里记录苏南大叔和计算机代码的故事。本文讲述,在react网页里面,如何传递参数的事情。本文测试环境:win10create-react-appreact@18.1.0react-dom@18.1.0react-router-dom@6.3.0node@16.14.2

值得说明的是:本文中的react组件,是函数式组件,不同于以往的类式组件。

基本思路

目前最新的react范例里面,已经没有了react.createClass(),也不能用this.了。目前最新版的react范例的思路就是:在路由里面使用props传递参数到组件,然后在组件里面使用useParams()得到参数,然后再进行加工处理,显示在组件之中。

苏南大叔:react教程,react路由如何传递参数?函数式组件接收参数 - react-newest
react教程,react路由如何传递参数?函数式组件接收参数(图6-2)

只是范例里面的写法变了,原来的react类组件的形式,依然是可以使用的。

组件传参,props.接收参数

调用组件的时候,直接传入相关参数。在组件构造函数里面,解析第一个参数props,就可以获得传入的相关参数。代码如下:

import './App.css';
import React from 'react';
function App() {
  return (
    <div className="App">
      <Book p3="组件传参" />
    </div>
  );
}
function Book(props) {
  return (
    <>
      <main>
        <h2>{props.p3}</h2>
      </main>
    </>
  );
}
export default App;

苏南大叔:react教程,react路由如何传递参数?函数式组件接收参数 - 组件传参
react教程,react路由如何传递参数?函数式组件接收参数(图6-3)

路由传参,useParams()接收参数

路由传参的时候,就是在路由的path里面,使用:来标识参数。在解析的时候,使用useParams(),记得引入useParams

import './App.css';
import { Routes, Route, Link, useParams } from "react-router-dom";
import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <nav>
          <Link to="/book1">book1</Link>
          <Link to="/book1/p1">book1page1</Link>
        </nav>
        <Routes>
          <Route path="book:p1" element={<Book p3="组件传参" />} />
          <Route path="book:p1/:p2" element={<Book p3="组件传参" />} />
        </Routes>
      </header>
    </div>
  );
}
function Book(props) {
  var p = "自有参数";
  var { p1, p2 } = useParams();
  return (
    <>
      <main>
        <h2>{p},{p1},{p2},{props.p3}</h2>
      </main>
    </>
  );
}
export default App;

苏南大叔:react教程,react路由如何传递参数?函数式组件接收参数 - useParams
react教程,react路由如何传递参数?函数式组件接收参数(图6-4)

路由嵌套传参outlet

路由传参的时候,路由可以嵌套,被嵌套的部分,在父组件中显示在Outlet的位置,注意引入Outlet

import './App.css';
import { Routes, Route, Link, useParams, Outlet } from "react-router-dom";
import React from 'react';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <nav>
          <Link to="/book1">book1</Link>
          <Link to="/book1/p1">book1page1</Link>
        </nav>
        <Routes>
          <Route path="book:p1" element={<Book p3="文章标题" />}>
            <Route path=":p2" element={<BookDetail p4="文章副标题" />} />
          </Route>
        </Routes>
      </header>
    </div>
  );
}
function Book(props) {
  var { p1, p2 } = useParams();
  return (
    <>
      <main>
        <h2>第{p1}本书,第{p2}页 {props.p3}</h2>
        <p><Outlet/></p>
      </main>
    </>
  );
}
function BookDetail(props) {
  var { p2 } = useParams();
  return (
    <>
      第{p2}页(路由),{props.p4}
    </>
  );
}
export default App;

苏南大叔:react教程,react路由如何传递参数?函数式组件接收参数 - outlet
react教程,react路由如何传递参数?函数式组件接收参数(图6-5)

苏南大叔:react教程,react路由如何传递参数?函数式组件接收参数 - outlet2
react教程,react路由如何传递参数?函数式组件接收参数(图6-6)

相关文档

综述

react里面解决了参数传递问题,就解决了组件之间关联互动的问题。更多react相关经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react