Allow slashes in route parameter on React

Question

I have a router like this:

<Route path="/blog/:date/:folder" render={(props: any) => <Home />

It works with this:

http://localhost/blog/2017-05-20/test

However, :folder can have slashes (sub-dir) and i want to parse all path at once in folder.

This is not working:

http://localhost/blog/2017-05-20/test/sub/dir

In this situation, I only get test. I want to get :folder as test/sub/dir as a whole.

Is there any way to achieve this with React Router?

Expected:

:date => '2017-05-20'
:folder => 'test/sub/dir'

Actual:

:date => '2017-05-20'
:folder => 'test'

Answer 1

Yes, you can do this by adding a + to your Route path. So, like this:

<Route path="/blog/:date/:folder+" ... />

This library is being used for matching the path. So for more advanced matching cases this is a better place to look at then the React Router docs.