Как распознать, откуда вызывается компонент для отображения правильного текста

Question

Я хотел бы повторно использовать компонент, который является uploading/adding продуктами, для базы данных, иногда продукт относится к типу готового продукта , а иногда продукт является частью незавершенного продукта .

http://localhost:1000/finished-product/add

http://localhost:1000/unfinished-product/add

В моих маршрутах я определил:

 <Route exact path="/finished-product/add" component={AddProduct} />

 <Route exact path="/unfinished-product/add" component={AddProduct} />

Когда мой компонент AddProduct загружен, я хотел бы отобразить правильный текст, например:

Пожалуйста, добавьте незавершенный продукт : или Пожалуйста, добавьте готовый продукт :

Я просто хочу разделить эти тексты и прочее, вот так, как я могу распознать, если я показываюкомпонент

от path="/unfinished-product/add" или от path="/finished-product/add".

Спасибо, ребята, ура

Answer 1

Использование реквизита маршрута

Поскольку ваш компонент рендерится Route, он получает следующую опору:

this.props.location.pathname // => '/finished-product/add' || '/unfinished-product/add'

Вы можете использовать его, чтобы написать условие.

const text = this.props.location.pathname === '/finished-product/add' ? 'Please add finished product' : 'Please add unfinished product';

Ссылки:

Маршрутные реквизиты: https://reacttraining.com/react-router/web/api/Route/route-props

location проп: https://reacttraining.com/react-router/web/api/location

Или используйте функцию render с новой опорой

Другим решением будет использование функции render на ваших маршрутах, передающей новую опору вашему компоненту:

<Route exact path="/finished-product/add" render={routeProps => <AddProduct {...routeProps} finished />} />
<Route exact path="/unfinished-product/add" render={routeProps => <AddProduct {...routeProps} />} />

Итак, в вашем AddProduct компоненте есть finished логическая опора.

const text = this.props.finished ? 'Please add finished product' : 'Please add unfinished product';

Справка:

https://reacttraining.com/react-router/web/api/Route/render-func

Answer 2

Это можно решить с помощью параметров запроса /product/add?status='finished'при определении маршрутов

<Route exact path="/product/add" component={AddProduct} />

и в компоненте

<Link to='/product/add?status="finished"'>Finished Product</Link>
<Link to='/product/add?status="unfinished"'>Unfinished Product</Link>