javascript - 如何在reactjs中获取url参数

Question

我有两个组件:App 和Contact。我只想在路由中传递的联系人页面上打印 id，但是当我在联系人组件中 console.log(this.props) 时，它显示一个空对象。

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

class App extends React.Component {
  render() {
    return (
      <Router>
        <ul>
          <li>
            <Link exact to="/">
              Home
            </Link>
          </li>
          <li>
            <Link to={"/contact/id=" + 5}>contact us</Link>
          </li>
        </ul>

        <Route exact path="/">
          Home
        </Route>

        <Route path="/contact">
          <Contact />
        </Route>
      </Router>
    );
  }
}

export default App;

import React from "react";

class Contact extends React.Component {
  render() {
    {console.log(this.props);}
    return <div>contact page</div>;
  }
}

export default Contact;

如何console.log(this.props.match)？

Answer 1

您可以像这样将它传递到 Contact 组件中:

<Route path="/contact">
    <Contact id={5}/>
</Route>

在你的 Contact 组件中:

如果你正在使用类

this.props.id

如果您正在使用函数

function Contact({id, ...props}){
// id === 5
}

值得注意的是，这仍然是 javascript，您可以像在 vanilla JS 中一样获取 URL 参数:(如果您愿意，尽管不建议这样做):

let id = (new URL(window.location.href)).searchParams.get('id');

希望对您有所帮助，