Respond to the router, match the template as a parameter

Question

I have an outdated web application that is being replaced with React, and it is called by these various systems, passing in the URL (obtained from the records and the existing database system). The application displays representations of folders, files in an isolated container in accordance with the path traveled.

I need to be able to identify these requests and redirect them to the file / folder transfer page, processing everything after "/ files / part of the path down" is specified as the path to the file or folder.

<Route path="/" handler={Master}>
  <Route name="files_link" path="files" handler={Files} />
  <Route name="filesWithPath_link" path="files/*:path" handler={Files} />
</Route>

I would like to be able to handle requests submitted to

/files  

and process it on the page (by default for the top-level folder, because the path parameter is not passed.

and have all of the following examples of a possible URL just passed to the router, and extract the path parameter from the bit after / files /.

/files/folder                                 path=folder
/files/folder/filename.ext                    path=folder/filename.ext
/files/folder/folder1                         path=folder/folder1
/files/folder/folder1/filename.ext            path=folder/folder1/filename.ext
/files/folder/folder1/folder2/                path=folder/folder1/folder2
/files/folder/folder1/folder2/filename.ext    path=folder/folder1/folder2/filename.ext

.... and so on ...

When I try to do this, I get an error

Uncaught Invariant Violation: Missing "splat" parameter for path "/beta/page/files/*:path"

I am currently using react0.14.2 and react-router0.13.4.

How do you feel about handling variable-length paths this way in React-router?

Answer 1

You need to use it like this:

<Route name="filesWithPath_link" path="files/*" handler={Files} />

And then in your React component, you can access the splat value:

    // The '*' in the path match gets assigned to this.props.params.splat
    var path = this.props.params.splat;