Question

我正在使用React 16.13.0。在我的组件中，我可以像这样访问查询字符串参数（例如/ url？coop_id = 23）

import { useParams } from "react-router-dom";
...
const { coop_id } = useParams();

但是，如何以RESTful格式访问参数？例如。如果我的URL是/ edit / 23 / home，获取“ 23”的React方法是什么？我已经在src / App.js文件中定义了路由

          <Switch>
            ...
            <Route path="/edit/:id/home" component={Edit} />

如果有用的话。

Answer 1

import { useParams} from "react-router";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Portfolio = () => {
 let { id } = useParams();
 return (
    <div>
        Portfolio component
        <p>Topic: {id}</p>
    </div>
        );
 };

Answer 2

您可以使用提取ID：

from random import choice

name = choice(["abtin", "shino"])

if name == "abtin" and name == "shino":

Answer 3

对于/edit/:id/home，您可以在组件中嵌套路由以进行编辑。

编辑组件可能类似于：

function Edit() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();
  // We can further check if there are other parts available after the /:id
  // the path will contain those parts
  let { path } = useRouteMatch();

  return (
    <div>
      <h3>ID: {id}</h3>
      <Switch>
        <Route path={`${path}/home`}>home</Route>
      </Switch>
    </div>
  );
}

您可以根据Edit之后是否有内容，在/:id组件中显示不同的内容。请查看useParams和useRouteMatch了解更多详细信息。在https://reactrouter.com/web/example/nesting上查看示例以获取有关嵌套的详细信息。

在React中，我可以使用“ useParams”来访问URL的RESTful组件吗？

3 个答案: