How to create dynamic routes?

Question

typescript

Hello everyone, I'm using react-router 3 version. An array of objects arrives from the back, each object has an ID, etc.
Using map, I go through the array in the List component and create a list. Now the question is how to create dynamic routes for a single list item?

<Route path="/notifications/list">
                <IndexRoute component={withTraceLogging(Notifications)} />
                <Route path='/notifications/:typeId' component={NotificationListItems} />
 </Route>

Answer 1

You need to create two routes:
For spsis:

<Route path='/notifications' component={NotificationsList} />

For a specific element:

<Route path='/notifications/:typeId' component={ConcreteNotification} />

Inside ConcreteNotification , you need to extract the typeId parameter and request a specific element by this parameter, if you need to request it, if not, you can extract the element from the store by typeId .
With the help of hooks, it is done like this:
const { typeId } = useParams()
If you need to request data: If you don’t need:
useEffect(() => fetchNotification(typeId), [])

const notification = useSelector(s => s.notifications.data.find(n => n.typeId === typeId))