Javascript react路由器4查询参数示例不工作

问题：尝试在我的本地环境上实现react路由器查询参数示例。下面是他们网站上的代码

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

function ParamsExample({ location }) {
  let params = new URLSearchParams(location.search);

  return (
    <Router>
      <div>
        <p>
          React Router does not have any opinions about how your parse URL query
          strings. Some applications use simple key=value query strings, but
          others embed arrays and objects in the query string. So it's up to you
          to parse the search string yourself.
      </p>
        <p>
          In modern browsers that support{" "}
          <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL">
            the URL API
        </a>
          , you can instantiate a <code>URLSearchParams</code> object from{" "}
          <code>location.search</code> and use that.
      </p>
        <p>
          In{" "}
          <a href="https://caniuse.com/#feat=url">
            browsers that do not support the URL API (read: IE)
        </a>{" "}
          you can use a 3rd party library such as{" "}
          <a href="https://github.com/sindresorhus/query-string">query-string</a>.
      </p>
        <div>
          <h2>Accounts</h2>
          <ul>
            <li>
              <Link to={{ pathname: "/account", search: "?name=netflix" }}>
                Netflix
            </Link>
            </li>
            <li>
              <Link to={{ pathname: "/account", search: "?name=zillow-group" }}>
                Zillow Group
            </Link>
            </li>
            <li>
              <Link to={{ pathname: "/account", search: "?name=yahoo" }}>
                Yahoo
            </Link>
            </li>
            <li>
              <Link to={{ pathname: "/account", search: "?name=modus-create" }}>
                Modus Create
            </Link>
            </li>
          </ul>

          <Child name={params.get("name")} />
        </div>
      </div>
    </Router>
  );
}

function Child({ name }) {
  return (
    <div>
      {name ? (
        <h3>
          The <code>name</code> in the query string is "{name}"
        </h3>
      ) : (
          <h3>There is no name in the query string</h3>
        )}
    </div>
  );
}

export default ParamsExample;

---

渲染时，我收到以下错误消息

TypeError:无法读取未定义的

的属性“search”，这很简单，但在我的
控制台中执行
位置搜索时，我得到以下输出
“？name=zillow group”

这是说
位置。search
是一个有效的属性，但不确定react没有看到它的原因。
在控制台中记录位置时，您正在记录window.location对象。但是，在您的组件中，定义了一个具有优先权的位置道具。在中没有显式显示，但他们正在渲染某个位置的ParamsExample组件，并传递位置属性

您可以使用或访问react router location prop（除其他外）。这是：

在控制台中记录位置时，您正在记录window.location对象。但是，在您的组件中，定义了一个具有优先权的位置道具。在中没有显式显示，但他们正在渲染某个位置的ParamsExample组件，并传递位置属性

您可以使用或访问react router location prop（除其他外）。这是：

您可以在函数paramsecample中尝试console.log（location）吗。并刷新组件。因此，我们可以检查是否从刷新的初始时间开始获得搜索属性。请让我知道结果，然后在函数paramsecample中尝试console.log（location）。并刷新组件。因此，我们可以检查是否从刷新的初始时间开始获得搜索属性。请告诉我结果
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";

function ParamsExample() {
  return (
    <Router>
      <div>
        <p>
          React Router does not have any opinions about how your parse URL query
          strings. Some applications use simple key=value query strings, but
          others embed arrays and objects in the query string. So it's up to you
          to parse the search string yourself.
        </p>
        <p>
          In modern browsers that support{" "}
          <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL">
            the URL API
          </a>
          , you can instantiate a <code>URLSearchParams</code> object from{" "}
          <code>location.search</code> and use that.
        </p>
        <p>
          In{" "}
          <a href="https://caniuse.com/#feat=url">
            browsers that do not support the URL API (read: IE)
          </a>{" "}
          you can use a 3rd party library such as{" "}
          <a href="https://github.com/sindresorhus/query-string">
            query-string
          </a>
          .
        </p>
        <div>
          <h2>Accounts</h2>
          <ul>
            <li>
              <Link to={{ pathname: "/account", search: "?name=netflix" }}>
                Netflix
              </Link>
            </li>
            <li>
              <Link to={{ pathname: "/account", search: "?name=zillow-group" }}>
                Zillow Group
              </Link>
            </li>
            <li>
              <Link to={{ pathname: "/account", search: "?name=yahoo" }}>
                Yahoo
              </Link>
            </li>
            <li>
              <Link to={{ pathname: "/account", search: "?name=modus-create" }}>
                Modus Create
              </Link>
            </li>
          </ul>

          <Route
            render={({ location }) => {
              let params = new URLSearchParams(location.search);
              return <Child name={params.get("name")} />;
            }}
          />
        </div>
      </div>
    </Router>
  );
}

function Child({ name }) {
  return (
    <div>
      {name ? (
        <h3>
          The <code>name</code> in the query string is "{name}"
        </h3>
      ) : (
        <h3>There is no name in the query string</h3>
      )}
    </div>
  );
}

function App() {
  return <ParamsExample />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);