0

I'm building a deeply nested component that can be navigated to a lot of different ways, so I'm using a wildcard so I don't have to write out all the possible routes, something like:

   <Route path={'**/post/new'}>
     <CreatePost {...props} />
   </Route>

However, now I need to get and use information from where the user came from in the create post component, so if their paths were:

/en/10249/discussion/13353/thread/24/post/new
/en/10015/discussion/14233/post/new
/fr/10350/link/155/post/new

I would need the params:

/en/:b_Id/discussion/:d_Id/thread/:t_Id/post/new
/en/:b_Id/discussion/:d_Id/post/new
/fr/:b_Id/link/:l_Id/post/new

including en, fr, discussion, thread and link, but because I replaced the params with a wildcard I don't have access to those params anymore. These are just a small subset of path examples that can reach /post/new, and why I needed to replace all routes with a wildcard.

I'm currently thinking of parsing the URL by splitting it by / and reading relevant data that way, but I'm looking if there are better alternative approaches.

Is there a way I can write this where I don't need to type out every possible route, while still splitting up the path into separate params?

twoknees
  • 1

1 Answers1

0

react-router automatically includes path parameters in the component props.

In your <CreatePost> component, use:

this.props.match.params.d_Id

and so on.

For more info, see this question.

yummypasta
  • 1,398
  • 2
  • 17
  • 36