将路径Param传递到Switch-React Router中Route的render()函数

Question

我的组件CompanyProfile是一个钩子。但我更喜欢使用交换机和React路由器。我如何获得:name，它是我通过uri中的<Link />发送的CompanyProfile的预期道具，作为道具发送到渲染中指定的CompanyProfile组件？

const App = () => (
<>
<Switch>
<Route
exact
path="/company/:name"
render={(props:RouteComponentProps) => (
<CompanyProfile {...props} findCompany={findCompany} />
} />
...

我之所以使用render，是因为我还需要将findCompany函数作为道具传递给组件。

在另一个组件中，我有一个到此路由的链接：

<Link to={`/company/${company.name}`} >
<img alt="company profile image" src={companyUrl} />
</Link>

所以我正努力让这个链接发挥作用。

万一这有帮助，这里是我的整个交换机：

const App = () => (
<>
<Switch>
<Route component={withTracker(HomePageContainer)} exact path="/" />
<Route component={Build} exact path="/build" />
<Route
exact
path="/company/:name"
render={(props:RouteComponentProps) => (
<CompanyProfile {...props} findCompany={findCompany} />
} />
<Route
component={withTracker(CompanyDetailContainer)}
name="companydetail"
path="/companies/:companyId/details" />
<Route component={withTracker(InterviewContainer)} name="company" path="/interviews/companies/:companyId" />
<Route component={withTracker(About)} name="about" path="/about" />
<Route component={withTracker(Container)} path="/" />
<Route component={withTracker(NotFound)} path="*" />
</Switch>
<RenderRoute />
</>
);

这是CompanyProfile.tsx的一部分。我尝试过让它通过比赛道具的建议，但我仍然需要以某种方式键入它，因为它还不理解match.params：

interface interface CrafterProfileProps {
name: string;
findCompany: (name: string) => Promise<Company>;
}

const CompanyProfile = (props: CompanyProfileProps) => {
const { findCompany } = props;
const { name } = props.match.params;
const [company, setCompany] = useState<Company>();
...

我上一次能够匹配是使用withRouter，但我不想使用那样的HOC。这是一个钩子组件，所以有没有一种方法可以将TypeScript类型添加到我的函数中，让我在这里获得match？

尝试2(我也不太擅长TS(这不起作用，它仍然抱怨它不知道匹配，但是：

interface CompanyProfileProps {
findCompany: (name: string) => Promise<Company>;
props: RouteComponentProps<{ name?: string }>;
}
const CompanyProfile = (props: CompanyProfileProps) => {
const { findCompany } = props;
const { name } = props.props.match.params;

最终

我无法在我的组件中键入TS并进行工作，所以我选择了答案提出的另一条路线，这就是有效的方法：

<Route
exact
path="/company/:name"
render={(props:RouteComponentProps<{name: string}>) => {
const { name } = props.match.params;
return (<CompanyProfile findCompany={findCompany} name={name} />);
}} />

如果有人有更好的方法，我会洗耳恭听，但这目前有效！

Answer 1

CompanyProfile由Route的render道具呈现，由于您正确地将路由道具传递给它，因此您可以简单地通过match道具(props.match.params.name(进行访问。

[编辑]

如果Typescript抱怨路由道具，您可以提取匹配参数并传递给路由组件。只传递接口中声明的道具。

render={(props: RouteComponentProps) => {
const { name } = props.match.params;
return (
<CompanyProfile
findCompany={findCompany}
name={name}
/>
);
}}

另一种选择是声明CompanyProfileProps和RouteComponentProps接口的并集。我对打字不太熟悉，所以我不会假装知道那里的语法，但我知道你可以做到这一点。