reactjs如何获取url参数答案

【问题标题】：How to get url parameters in reactjsreactjs如何获取url参数
【发布时间】：2019-10-15 18:16:34
【问题描述】：

我有两个组件：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)？

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案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');

希望这会有所帮助，

【讨论】：

【解决方案2】：

你的参数声明不正确

<Route path='/foo/:bar' component={Foo} />

在Foo里面

const Foo = ({ match }) =>{
    const = { params:{bar} } = match

    console.log(bar)
}

如果你访问像/foo/content bar 将断言到content

【讨论】：

【解决方案3】：

我想通了。我用withRouter() 包裹了我的 HOC，问题就解决了 :)

【讨论】：

【解决方案4】：

无论 clss 和功能组件如何，都适用于两种线性解决方案

const params = new URLSearchParams(window.location.search); // add on top under import
console.log(params.get('catid'));

我真的不知道为什么没有提到它

【讨论】：