Свойство, отображаемое как неопределенное в React Component - Получить props.match и дополнительное свойство в компоненте

Question

У меня есть index.js, из которого я вызываю такой компонент

const prop1 = 'test'
ReactDOM.render(

<BrowserRouter>
    <Switch>
        <Route path="/pathname/:param1/:param2" component={MyComponent} prop1={prop1}/>
    </Switch>
</BrowserRouter>,
document.getElementById('root')
);

Но в MyComponent.js this.props.prop1 отображается как неопределенное. Есть идеи почему? Мне нужно иметь возможность получить this.props.match.params и prop1

Answer 1

@ jonrsharpe комментарий очень важен:

Маршрут передает только реквизиты маршрута, историю, матч и местоположение, в компоненты, которые он монтирует.

Итак, если вы хотите передать реквизит вашему компоненту в маршруте, он должен выглядеть следующим образом:

<Switch>
   <Route path="/pathname" render={() => (<MyComponent prop1={prop1}/>)} />
</Switch>

Answer 2

Это передаст совпадение, местоположение, историю и пользовательские свойства новому компоненту.

const prop1 = 'test'
ReactDOM.render(

<BrowserRouter>
    <Switch>
        <Route path="/pathname/:param1/:param2" render={(props) => <MyComponent {...props} prop1={prop1} />} />
    </Switch>
</BrowserRouter>,
document.getElementById('root')
);

Код песочницы ссылка

Answer 3

const prop1 = 'test'
ReactDOM.render(

<BrowserRouter>
    <Switch>
        <Route path="/pathname/" component={() => <MyComponent prop1={prop1}>} />
    </Switch>
</BrowserRouter>,
document.getElementById('root')
);    

Answer 4

если вам нужно передать реквизит компоненту, отображаемому с помощью React Router, вместо использования реквизита компонента Routes используйте его реквизит рендеринга, передав ему встроенную функцию, а затем передайте аргументы создаваемому элементу.

<Route
  path='/pathname'
  render={(prop1) => <MyComponent props={prop1} />}
/>

Пожалуйста, попробуйте это, должно работать.