react-router-dom:如何用某种模式匹配url

Question

我有像

这样的url

/detail/sbc-123
/detail/tresds-121212
/detail/xywh-1

如何为此编写路由器并获得字符串sbc-123

Answer 1

你有两个选择docs

import { Route } from "react-router-dom";
function App() {
return (
<Route
path="/detail/:exact"
render={({ match }) => {
/* Do whatever you want with the match... */
return <div />;
}}
/>
);
}

// Or you can just
import { useRouteMatch } from "react-router-dom";
function Component() {
let match = useRouteMatch("/detail/:exact");
// Do whatever you want with the match...
return <div />;
}

匹配对象包含有用的信息，给定的参数是它的路径，您可以通过URL字段

访问正确的路径

match.path // '/details/:exact'
match.url // '/detail/sbc-123'