如何在reactjs中获取网址参数

Question

我有两个组件App和Contact。我只想在路线中通过的联系人页面上打印ID，但是当我在我的联系人组件中console.log（this.props）时，它显示为空对象。

    ******App component*******      
    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

    ******App component*******

    ******contact component*******
import React from "react";

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

export default Contact
    ******Contact component*******

如何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>

希望这会有所帮助，