首页 文章

反应路由器4查询参数示例不起作用

提问于
浏览
0

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 回答

  • 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

    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);
    

相关问题