Passing multiple URL parameters as props using react-router?

Question

When I pass just one parameter as follows, everything works as intended.

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID" render={
        (props) => <SessionViewer { ...props }/>
    } />
</Switch>

However, when I try to pass multiple (not just one) dynamic URL parameters as props with react-router:

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID/:tsFrom/:tsTo" render={
        (props) => <SessionViewer { ...props }/>
    } />
</Switch>

The page doesn't load and the following error is thrown:

Uncaught SyntaxError: Unexpected token <

Is there a proper way to do this?

could you please share your whole Routes ? where you define all the <Route> Components — Thomas Billot
– Thomas Billot, Commented Jul 9, 2019 at 14:03

Thomas Billot · Accepted Answer · 2019-07-09 14:28:27Z

2

I get what you are trying to do but this is not how you do it, react-router actually does this for you in a sense, let me explain:

React-router actually has its own props, and you can connect to the router to get those props

Little exemple:

First, Change your routing to this:

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID/:tsFrom/:tsTo" component={SessionViewer} />
</Switch>

this will make sure both routes will render SessionViewer, Then:

create a componentDidMount() method in SessionViewer
React-Router-Dom will provide you with different props by default if you use withRouter method on your component -> Add export default withRouter(SessionViewer) to your SessionViewer class
Since you have now a connected Class (to the routing) you can access match inside your props, this props is created by react-router and contains informations about what matched in this route : For exemple match.params.sessionId would contains the :sessionId from the route, meaning if I have /10/from/to

match.params = {
    sessionId: 10,
    tsFrom: from,
    tsTo: to
}

Now inside you componentDidMount method you can setState all the match.params you need to make conditionnal rendering for exemple.

Hope it helps, i can go deeper if you need but i rather keep it simple

answered Jul 9, 2019 at 14:28

Thomas Billot

1631 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

P A S H Over a year ago

Hey, this seems like the idiomatic way to write react routes with props, but it does not solve the Uncaught SyntaxError: Unexpected token < error. Please check my answer here:

P A S H · Accepted Answer · 2019-07-09 14:34:50Z

0

After searching around Stackoverflow for my Uncaught SyntaxError: Unexpected token < error, I found this answer that helped resolve the issue. I'll paste it here as well:

The "unexpected token" error can show up for a number of different reasons. I ran into a similar problem, and in my case the problem was that the script tag to load the generated bundle in the html was like so:

<script src="scripts/app.js"></script>

When navigating to a route with a parameter (same thing will happen to a nested route or a route with more than one segment), browser would try to load the script using the wrong url. In my case the route path was 'user/:id', and the browser made a request to http://127.0.0.1:3000/user/scripts/app.js instead of http://127.0.0.1:3000/scripts/app.js. The solution was easy, change the script tag to this:

<script src="/scripts/app.js"></script>

answered Jul 9, 2019 at 14:34

P A S H

5261 gold badge6 silver badges15 bronze badges

3 Comments

Thomas Billot Over a year ago

well that's why i asked you to post all your routes ;) you didn't post the user ones didn't you? EDIT: i saw that it's a copy pasta from the other post ! either way if it's resolved no problem

P A S H Over a year ago

@ThomasBillot The issue was actually in my root-level static html file, where the script was defined, similar to the answer I linked

Thomas Billot Over a year ago

Make sure you have a lot of control over you routes, by using <Switch> and exact property, this will make route matching and debugging 10X easier

Collectives™ on Stack Overflow

Passing multiple URL parameters as props using react-router?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related