react router, match wildcard as parameter

Question

I have a legacy web app that is being replaced with React and it is called by these various systems by being passed a URL (derived from records in and existing DB system) The app renders folder views, of files in a sandboxed container according to the path passed in.

I need to be able to identify these requests and route them to a File/Folder handing page, treating everything after the '/files/ part of the path down as a parameter to the path of 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 passed into

/files

and have it handled in the page (defaulting to top level folder because no path parameter passed.

and have all the following examples of 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 this I get an error

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

I'm currently using react 0.14.2 and react-router 0.13.4.

How would you go about handling a variable length path in this manner in React-router?

score 38 · Accepted Answer · answered Jan 20 '16 at 19:39

38

You need to use it like so:

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

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

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

answered Jan 20 '16 at 19:39

Jamis Charles

5,827
8
32
42

What version of react router does this involve? v3? – chrisjlee Jul 12 '17 at 15:01
6

React Router 4.3.1 - I got this working with `this.props.match.params[0]` – Jamie - Fenrir Digital Ltd Oct 24 '18 at 11:18
As mentioned here in [path-to-regex](https://github.com/pillarjs/path-to-regexp#zero-or-more) you could use a named parameter like "files/:filepath*" – Hugo Freitas Jul 23 '20 at 21:02

score 3 · Answer 2 · answered Feb 11 '21 at 01:16

3

For completeness, the splat parameter can be accessed from the useParams() hook as property 0:

const splat = useParams()[0];

answered Feb 11 '21 at 01:16

Lukas Bach

3,559
2
27
31

I get `Property '0' does not exist on type '{}'` – frazras Feb 17 '21 at 13:17
@frazras How does your route tag look like? And are you accessing the hook in a component that is located within a route? – Lukas Bach Feb 17 '21 at 23:56
@frazras You are using TypeScript. See my answer for an example with correct typing. – Christopher K. Dec 06 '22 at 07:35

HughHughTeotl · Answer 3 · 2023-02-02T14:45:51.653

1

In React Router v6, the "*" can be accessed from useParams() as a property named *.

const wildcard = useParams()["*"];

And of course you can always get the entire URL (i.e. everything including the bit before the *) using useLocation()

edited Feb 02 '23 at 14:45

answered Dec 01 '22 at 11:20

HughHughTeotl

5,439
3
34
49

Small mistake here, you forgot the parens, `useParams()["*"]` is correct. – meedstrom Feb 01 '23 at 19:52

score -1 · Answer 4 · answered Dec 06 '22 at 07:33

-1

Example in TypeScript with a named parameter:

<Route path="/files/:path">
  <Files/>
</Route>


import { useParams } from 'react-router';

export function Files(): React.ReactElement {
  const splat = useParams<{ path: string }>().path;
}

answered Dec 06 '22 at 07:33

Christopher K.

1,015
12
18

react router, match wildcard as parameter

4 Answers4