React Router带参数Link技术咨询：附路由配置代码

嘿，我来帮你搞定React Router里带参数的Link用法～结合你给出的路由配置，我给你梳理几个实用的场景和具体实现步骤：

1. 路径参数（URL显式传参，推荐用于持久化场景） #

这种方式会把参数直接放在URL里，比如 /authors/manage/123，适合需要分享链接、刷新页面参数不丢失的场景。

第一步：修改路由配置 #

给你的ManageAuthorPage路由加上可选参数（问号表示参数可选，既支持新增也支持编辑）：

import React from 'react';
import ErrorBoundary from './errorBoundary/errorPage';
import Home from './homePage';
import NotFoundPage from './notFoundPage';
import About from './about/aboutPage';
import Authors from './authors/authorPage';
import ManageAuthorPage from './authors/manageAuthorPage';
// 建议换成BrowserRouter，不需要手动传history
import { Switch, Route, Redirect, BrowserRouter } from 'react-router-dom';

class MyRouter extends React.Component{
  render(){
    return(
      <div>
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/authors" component={Authors} />
            {/* 新增带可选参数的路由配置 */}
            <Route path="/authors/manage/:authorId?" component={ManageAuthorPage} />
            <Route path="/not-found" component={NotFoundPage} />
            <Redirect from="*" to="/not-found" />
          </Switch>
        </BrowserRouter>
      </div>
    )
  }
}

第二步：写带参数的Link #

• 跳转到新增作者页面（无参数）：

<Link to="/authors/manage">新增作者</Link>

• 跳转到编辑作者页面（带id参数）：

// 假设你有一个author对象，包含id和name属性
<Link to={`/authors/manage/${author.id}`}>编辑 {author.name}</Link>

第三步：在组件中获取参数 #

如果你的ManageAuthorPage是类组件，通过this.props.match.params获取：

class ManageAuthorPage extends React.Component {
  componentDidMount() {
    const { authorId } = this.props.match.params;
    if (authorId) {
      // authorId存在，说明是编辑模式，调用接口获取作者信息
      console.log("编辑作者ID：", authorId);
    } else {
      // 无参数，是新增模式
      console.log("新增作者");
    }
  }

  render() {
    // ...组件渲染逻辑
  }
}

如果是函数组件，用useParams钩子：

import { useParams } from 'react-router-dom';

function ManageAuthorPage() {
  const { authorId } = useParams();

  // 组件逻辑
  return (
    // ...渲染内容
  );
}

2. State隐式传参（适合无需暴露参数的场景） #

如果不想把参数暴露在URL里，可以用Link的state属性传递，比如直接传递整个作者对象，但注意：刷新页面后state会丢失（因为存在内存中）。

Link写法 #

<Link 
  to={{
    pathname: "/authors/manage",
    state: { author: author } // 传递整个author对象
  }}
>
  编辑 {author.name}
</Link>

路由配置不需要修改，保持原来的即可。

获取state参数 #

类组件通过this.props.location.state获取：

componentDidMount() {
  const { author } = this.props.location.state || {};
  if (author) {
    console.log("编辑作者：", author);
  }
}

函数组件用useLocation钩子：

import { useLocation } from 'react-router-dom';

function ManageAuthorPage() {
  const location = useLocation();
  const { author } = location.state || {};

  // ...组件逻辑
}

3. 查询参数（URL中的?xxx=xxx形式） #

这种方式参数会以/authors/manage?authorId=123的形式出现在URL中，适合多参数、非核心参数的场景。

Link写法 #

// 模板字符串写法
<Link to={`/authors/manage?authorId=${author.id}&name=${author.name}`}>编辑 {author.name}</Link>

// 对象写法
<Link 
  to={{
    pathname: "/authors/manage",
    search: `?authorId=${author.id}&name=${author.name}`
  }}
>
  编辑 {author.name}
</Link>

获取查询参数 #

类组件通过URLSearchParams解析this.props.location.search：

componentDidMount() {
  const searchParams = new URLSearchParams(this.props.location.search);
  const authorId = searchParams.get('authorId');
  const name = searchParams.get('name');
  console.log("作者ID：", authorId, "作者名称：", name);
}

函数组件结合useLocation：

import { useLocation } from 'react-router-dom';

function ManageAuthorPage() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const authorId = searchParams.get('authorId');
  
  // ...组件逻辑
}

内容的提问来源于stack exchange，提问作者Aries Brylle Ventura