react教程，react路由如何传递参数？函数式组件接收参数

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

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

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

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

基本思路

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

只是范例里面的写法变了，原来的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;

路由传参，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;

路由嵌套传参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;

相关文档

• https://reactrouter.com/docs/en/v6/getting-started/tutorial
• https://newsn.net/say/react-router.html
• https://newsn.net/say/create-react-app.html

综述

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

• https://newsn.net/tag/react/

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