Не удается получить доступ к this.props.location из ссылки на реактивный маршрутизатор

Question

Я использую response-router v4, и я пытаюсь передать некоторые реквизиты через ссылку, подобную этой

Page.js render
<Link to={{
    pathname= "loosePath/" + this.id,
    state = {
            name = this.name
            author = this.author
    }
}}>
    <div className="pageComponent"></div>
</Link>

Однако я не могу получить доступ к this.props.location на прибывшей странице. Я думаю, это потому, что я использовал render вместо component в моем Route компоненте

Main.js render
<Switch>
    ...
    <Route path="/loosePath" render={()=><Component2 someProps={props} />}></Route>
    ...
</Switch>

Если я изменю его на

    <Route path="/loosePath" component={Component2}></Route>

, я могу получить доступ к this.props.location.state с без проблем. Однако, делая это, я не могу передать некоторые свойства в Main. js на «глобальном уровне». (Link предназначен для передачи некоторых «локальных» переменных, если эта аналогия имеет смысл.)

Что было бы наилучшей практикой для go в подобных ситуациях?

Answer 1

Функция render получает свойства маршрута (match, location, history) как один параметр объекта.

Одно исправление - просто использовать те:

<Route 
  path="/loosePath" 
  render={(routeProps) => <Component2 someProps={props} {...routeProps} />}
></Route>

Здесь мы деструктурируем routeProps, переданное как реквизит, в Component2. Таким образом, вы можете передать как пользовательские свойства, так и свойства маршрута вашему компоненту.

---

Однако рекомендуется просто передать Component2 в качестве дочернего элемента:

<Route 
  path="/loosePath" 
>
  <Component2 someProps={props} />
</Route>

Выполнение этого способа не добавит к нему свойства маршрута, как в методах render, component или children function. Вместо этого вы должны использовать withRouter для доступа к свойствам маршрута в компоненте класса или доступное hooks из функциональных компонентов.

Например, если Component2 были функциональным компонентом, вы бы получили следующее местоположение:

const Component2 = (props) => {
  let location = useLocation();
  ...

Или в качестве компонента класса вы просто обернули бы экспортированный компонент в withRouter:

class Component2 extends Component {
  render() {
    this.props.location
  ...

export default withRouter(Component2)