Как я могу получить доступ к параметрам маршрутизатора в JSX? - PullRequest
Новая
       18

Как я могу получить доступ к параметрам маршрутизатора в JSX?

1 голос
/ 19 февраля 2020

Я пытаюсь отредактировать сообщение по его идентификатору, и я хотел бы передать id aa prop компоненту EditPost. Как мне go узнать об этом? 

  render() {
    return (
      <Router>
      <Switch >
        <Route path="/edit/:id">
          <EditPost index={/*what do I do here?*/} />
        </Route>
      </Switch>
      </Router>
    );
  }

Ответы [ 2 ]

2 голосов
/ 19 февраля 2020

В вашем EditPost компоненте вы можете сделать это следующим образом: 

import { useParams } from "react-router-dom";

const EditPost = () => {
  const params = useParams();

  return <p>Your Post ID is: {params.id}</p>  
}

export default EditPost;

И сделать свой маршрут следующим образом: 

<Route path="/edit/:id">
  <EditPost />
</Route>

Надеюсь, это работает для вас.

1 голос
/ 19 февраля 2020

Если вы пишете компонент с компонентом класса, вы можете использовать следующий подход. Вот компонент 

const EditPost = ({ match }) => {
  let { id } = match.params
  // ...
}

или тот же с крючком: 

const EditPost = () => {
  let { id } = useParams();
  // ...
}

И тогда в роутере вы можете использовать его так: 

<Router>
  <div>
    <Switch>
      <Route path="/blog/:slug" component={BlogPost} />
    </Switch>
  </div>
</Router>
...