如何将模式和Id匹配在他们的反应路由器上

Question

我是新手。我有一个带有react路由器的路由，它以:id为参数，我如何使用react路由器dom useLocation来匹配它。

基本路径可以是posts或post/21如何匹配post/21来渲染组件，如果我我在的详细页面上

{path === 'post/:id' ? <PostDetail /> : <Posts /> }

但是使用位置返回posts/1，我不能使用它来匹配后细节

摘要Any path that matches: post/:id

Answer 1

通常，您将使用一个Switch组件和一组Route组件。每个Route采用一个用于匹配的路径道具。

import React from 'react';
import { BrowserRouter, Switch, Route, useRouteMatch } from 'react-router-dom';
const App = (props) => {
return (
<BrowserRouter>
<Switch>
<Route path="/post/:id">
<PostDetail />
</Route>
<Route path="/post">
<Posts />
</Route>
</Switch>
</BrowserRouter>
);
};

作为Route的子级的组件可以使用useRouteMatch钩子来访问路径参数。

const PostDetail = (props) => {
const match = useRouteMatch();
return <h1>{match.params.id}</h1>;
};