在react本机动态链接中传递参数

在React中，动态链接通常是通过React Router库来实现的，它允许你在应用中创建和管理路由。在React Router v4及以后的版本中，你可以使用react-router-dom包来处理路由。

基础概念

路由（Routing）：路由是指在Web应用中，根据URL的不同，展示不同的页面或组件的机制。

动态链接（Dynamic Links）：动态链接是指URL中包含可变参数的链接，这些参数可以在不同的请求中取不同的值。

类型

查询参数（Query Parameters）：通常以?key=value的形式出现在URL末尾。
路径参数（Path Parameters）：嵌入在URL路径中的参数。

应用场景

用户个人资料页面：通过用户ID访问特定用户的资料。
商品详情页：通过商品ID查看商品详情。
搜索结果页：根据搜索关键词展示结果。

示例代码

安装React Router

首先，你需要安装react-router-dom：

npm install react-router-dom

使用路径参数

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function UserProfile({ match }) {
  const { userId } = match.params;
  return <div>User ID: {userId}</div>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/user/123">User 123</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/user/:userId" component={UserProfile} />
      </Switch>
    </Router>
  );
}

export default App;

使用查询参数

import { BrowserRouter as Router, Route, Switch, Link, useLocation } from 'react-router-dom';

function SearchResults() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const keyword = queryParams.get('keyword');

  return <div>Search results for: {keyword}</div>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/search?keyword=react">React</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route path="/search" component={SearchResults} />
      </Switch>
    </Router>
  );
}

export default App;

遇到的问题及解决方法

问题：如何获取URL中的动态参数？

解决方法：

对于路径参数，可以使用match.params来获取。
对于查询参数，可以使用URLSearchParams接口来解析location.search。

示例代码：

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

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

function SearchResults() {
  const query = useQuery();
  const keyword = query.get('keyword');

  return <div>Search results for: {keyword}</div>;
}

通过这种方式，你可以轻松地在React应用中处理动态链接和参数传递。