Question

如何从 REACTJS 中的路由获取参数

2019-09-22

81

reactjs

我想在我的 React 类中获取参数

我得到了文件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { App, addPost, Child } from './components/App';
import { Switch , Route, BrowserRouter } from 'react-router-dom'

ReactDOM.render((
   <BrowserRouter>
    <Switch>
        <Route exact path="/" component={App} />
        <Route path="/dodajpost" component={addPost} />
        <Route exact path="/:id" component={App}  /> // this one
    </Switch>
  </BrowserRouter>
), document.getElementById('root'));

现在在我的类中我想获取参数“:id”并将其发送到服务器，但我不知道如何获取它

export default class Post extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,

     };
}
componentDidMount () {
    const { handle } = this.props.match.params
    console.log(handle) // undefined
  }

如何在 componentDidMount 中从路由获取参数？

我尝试了很多方法，但都没有用

Answer 1

由于您的 Route 的参数名称为 id ，

<Route exact path="/:id" component={App}  />

而不是这个，

const { handle } = this.props.match.params

您应该这样做，

const { id } = this.props.match.params

console.log(id)

注意： 您有 2 个用于 App 组件的 Route 。因此，当您已经在 App 组件中并尝试导航到 path="/:id" 时，您将无法获取 id 值，为此您可能需要 componentDidUpdate 方法。

componentDidUpdate () {
  const { id } = this.props.match.params
  console.log(id)
}

或者您在这里可能有一个拼写错误， <Route exact path="/:id" component={App} /> ，而不是 App 作为组件，您可能有 Child (Post) 组件 <Route exact path="/:id" component={Child} />

Demo