Как передавать пропсы в React Router?

Поиск

В React Router можно передавать пропсы через компоненты маршрутизации.

Пропсы могут быть переданы двумя способами: через атрибуты component и render.

Атрибут component:

import { Route } from "react-router-dom"
 
function MyComponent(props) {
  return <div>{props.text}</div>
}
 
function App() {
  return <Route path="/my-route" component={() => <MyComponent text="Hello, World!" />} />
}

Атрибут render:

import { Route } from "react-router-dom"
 
function MyComponent(props) {
  return <div>{props.text}</div>
}
 
function App() {
  return <Route path="/my-route" render={() => <MyComponent text="Hello, World!" />} />
}

В обоих случаях мы создаем маршрут для пути “/my-route” и рендерим компонент MyComponent. Пропс text передается в компонент через атрибуты component или render.

Если вы хотите передать дополнительные пропсы в компонент, вы можете использовать метод расширения объекта:

import { Route } from "react-router-dom"
 
function MyComponent(props) {
  return (
    <div>
      <p>{props.text}</p>
      <p>{props.anotherProp}</p>
    </div>
  )
}
 
function App() {
  return (
    <Route
      path="/my-route"
      render={(routeProps) => (
        <MyComponent text="Hello, World!" anotherProp="Another prop value" {...routeProps} />
      )}
    />
  )
}

В этом примере мы добавляем проп anotherProp в компонент MyComponent, а также передаем все пропсы маршрутизации через метод расширения объекта (...routeProps).