开发者问题收集

无法读取 React 中未定义的属性“params”

2020-03-02
416
javascript reactjs react-router-dom

我是 React 新手。我尝试使用 react-router-dom 通过 URL 传递值。但无法获取参数

TypeError: Cannot read property 'params' of undefined.

我尝试了已有的解决方案但毫无作用。我犯了什么错误？有人能给我解释一下吗？提前致谢。

Main 组件： 

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/edit/:id" component={Edit} exact={true}>
            <Edit />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}
export default App;

Edit 组件： 

class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.match.params.id
    };
  }

  render() {
    return <h2>Edit Page</h2>;
  }
}
export default Edit;
3个回答

注意： 我使用 useParams 提供了答案，因为您的原始问题涉及它。除此之外，如果您必须使用类组件，通常 this.props.match.params.id 应该可以工作，因为您是通过 Route 使用组件的。

您应该在 Edit 组件中使用 useParams ，它应该是一个函数组件。 

function Edit() {
  const { id } = useParams();
  return (
    <div>{id}</div>
  )
}

此外，我不知道您使用的是哪个 React Router 版本，但如果您没有使用 v6，您可能希望像这样使用 Route 部分： 

<Router>
  <Switch>
    <Route path="/edit/:id" component={Edit} exact />
  </Switch>
</Router>
devserkan
2020-03-02

试试这个 - 

import { withRouter } from 'react-router-dom';

class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.match.params.id
    };
  }

  render() {
    return <h2>Edit Page</h2>;
  }
}
export default withRouter(Edit);
Yash
2020-03-02

需要检查你的反应版本，因为你的代码在我的系统中运行良好 - 编辑了你的编辑组件 

return (
            <>
            <h2>Edit Page</h2>
            {this.state.id}
            </>
        );

访问的网址 - http://localhost:3000/edit/:2

在此处输入图片描述

结果图像

Ravi
2020-03-02