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

您错误地声明了参数

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

在Foo内

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

    console.log(bar)
}

如果您像/foo/content那样访问，bar将声明为content

Answer 2

您可以像这样将其传递到Contact组件中：

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

以及您的Contact组件内部：

如果您正在使用类

this.props.id

如果您正在使用函数

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

值得注意的是，它仍然是javascript，您可以像在普通JS中一样获得URL参数，例如：（如果您愿意，尽管不建议这样做）：

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

希望这会有所帮助，

Answer 3

我知道了。我用withRouter（）包装了HOC，问题得以解决：）

Answer 4

死的简单方法两行解决方案，无论类和功能组件如何

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

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

如何在React.js中获取URL参数

4 个答案: