problem :尝试在我的本地环境中实现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: Cannot read property 'search' of undefined
这很直接,但是当我在 console
中做 location.search
时,我得到以下输出 "?name=zillow-group"
据说 location.search
是一个有效的 property ,但不确定为什么反应没有看到它 .
1 回答
当're logging location in the console, you are logging the window.location object. In your component, however, there is a location prop defined that takes precedence. It'未在react-router example中明确显示时,它们会在某处呈现ParamsExample组件并传入位置prop .
您可以使用withRouter hoc或使用Route component来访问react-router位置prop(以及其他) . 这是an example: