反应我想得到反应路由器的参数答案

【问题标题】：react I want to get the params of the react router反应我想得到反应路由器的参数
【发布时间】：2022-01-12 03:59:36
【问题描述】：

我正在使用 react 和 react-router-dom。
我想在 User 组件中获取 :groupId 的值。
在 Groups 组件中，我可以使用 useParams 来获取 groupId，但我想在 User 组件中获取 groupId 并将其作为 props 传递给 Groups 组件。

import React from 'react';
import {Route, useHistory, useParams} from 'react-router-dom';
import User from 'components/User';
import useSearchParams from './useSearchParams';

export const User = () => {
  const {query, setQuery} = useSearchParams();
  const history = useHistory();
  const {userId} = useParams<{
    userId: string;
  }>();

  return (
    <div>
      <Route path="/users/:userId/groups/:groupId">
        <Groups
          onClose={() =>
            history.push(`/users/${userId}/groups${location.search}`)
          }
        />
      </Route>
    </div>
  );
};

import React from 'react';

interface Props {
  groupId?: string;
  onClose: () => void;
}

export const Groups = ({groupId, onClose}: Props) => {
  const params = useParams<{prospectId: string}>();
  console.log(params)
   
  return (
    <div>
    </div>
  );
};

【问题讨论】：

当User 是渲染定义路由的组件时，您为什么想要或需要在User 中获取路由参数？为什么不只使用Group 中的useParams 挂钩，这就是它的全部设计方式。你能解释一下用例吗？

标签： reactjs react-router react-router-dom

【解决方案1】：

可以通过拆分pathName得到groupId，得到最后一项

import React from 'react';
import {Route, useHistory, useParams,useLocation} from 'react-router-dom';
import User from 'components/User';
import useSearchParams from './useSearchParams';

export const User = () => {
  const {query, setQuery} = useSearchParams();
  const history = useHistory();
  const {userId} = useParams<{
    userId: string;
  }>();
 const location = useLocation();
 const groupId = location.pathname.split("/").pop();

  return (
    <div>
      <Route path="/users/:userId/groups/:groupId">
        <Groups groupId ={groupId }
          onClose={() =>
            history.push(`/users/${userId}/groups${location.search}`)
          }
        />
      </Route>
    </div>
  );
};

【讨论】：

location.search 中没有任何内容。 ''是。
您可以拆分 pathName 并获取 GroupId 然后您可以将其作为道具传递
当我得到location.pathname，我得到这个数据：我想得到a5667fbb-eaaa4-42bb-8bbb。如果我使用 pop()，我会得到时间线。
['', 'users', 'dnsidsiaji-3sse2-4ss13', 'groups', 'a5667fbb-eaaa4-42bb-8bbb', 'timeline']
你必须添加确切的路径，否则你只能得到一个时间线作为 groupId

【解决方案2】：

您甚至可以在 history.push(location, state) 中将 id 作为状态传递并更新组组件以从状态中获取组 ID，而不是将组 ID 作为 URL 的一部分传递。

编辑：传递状态：

    history.push({ 
     pathname: <your_path>,
     state: <state or props>
    })

检索状态使用：

    const location = useLocation()
    const state = location.state

【讨论】：

我该如何实现这个？
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。