Не удается прочитать свойство 'params' из неопределенного в React

Question

Я новичок в React. Я пытаюсь передать значение через URL, используя react-router-dom. Но не удается получить параметры, получающие

TypeError: Невозможно прочитать свойство 'params' из неопределенного.

Я попробовал решения, которые уже представлены, но ничего не помогло. Какую ошибку я сделал? Может кто-нибудь объяснить это мне? Заранее спасибо.

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;

Answer 1

Примечание: Я предоставил свой ответ с useParams, так как ваш первоначальный вопрос касался его. Кроме этого, если вам нужно использовать компонент класса, обычно this.props.match.params.id должен работать, так как вы используете свой компонент через Route.

. Вы должны использовать useParams в вашем Edit компоненте, и это должен быть компонентом функции.

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

Кроме того, я не знаю, какую версию React Router вы используете, но если вы не используете v6, вы, вероятно, захотите использовать часть Route следующим образом:

<Router>
  <Switch>
    <Route path="/edit/:id" component={Edit} exact />
  </Switch>
</Router>

Answer 2

Нужно проверить вашу версию реакции, потому что ваш код работает нормально в моей системе - отредактировал ваш компонент Edit

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

URL-адрес доступа - http://localhost: 3000 / edit /: 2

введите описание изображения здесь

результат в изображении

Answer 3

Попробуйте это -

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);