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

Question

我是新手。我有一条带有 react 路由器的路由，它以 :id 作为参数，我如何使用 react-router-dom useLocation.

来匹配它

基本上路径可以是posts或post/21 我如何匹配 post/21 来渲染一个组件，如果我想渲染一个单独的组件我在详情页

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

但使用位置 returns posts/1，我无法使用它来匹配 post 详细信息

摘要 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>;
};

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

How to match pattern with Id on them react router

javascript

regex

reactjs

react-router-dom