React-router optional path parameters at root

Question

I am a little confused on how to do (multiple) optional path parameters from the root. I'm using react-router 3, and redux 4.3.

From what I understand, (/:param1)(/:param2) should work, but I am getting the following error when loading the app:

[react-router] Location "/property/3633" did not match any routes.

index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { Router, browserHistory, Route } from 'react-router';

import { syncHistoryWithStore } from 'react-router-redux';

import configureStore from './store/configureStore';

import {MyContainer} from "./containers/MyContainer";

const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/(/:Type)(/:Id)" component={MyContainer}/>
        </Router>
    </Provider>,
    document.getElementById('root'),
);

FYI I have tried:

path="(/:Type)(/:Id)" 
path="(/:Type)/(/:Id)" 
path="/(/:Type)/(/:Id)" 
path="/(/:Type)(/:Id)" 
path="/:Type/:Id" // Only works when params are supplied

And this works:

<Route path="/test(/:Type)(/:Id)" component={MyContainer}/>

But again, this does not:

<Route path="/(/:Type)(/:Id)" component={MyContainer}/>

how about `path="(/:Type)(/:Id)"` ? – Tomasz Mularczyk Apr 18 '18 at 19:57 — Tomasz Mularczyk, Apr 18 '18 at 19:57

Chasing Unicorn - Anshu · Answer 1 · 2018-04-18T20:27:43.880

1

You need to add some realtive path, rather than directly giving params. <Route path="/get/(:Type)/(:Id)" component={MyContainer}/>

edited Apr 18 '18 at 20:27

answered Apr 18 '18 at 19:57

Chasing Unicorn - Anshu

590
2
15

1

he is using react-router v3 – Tomasz Mularczyk Apr 18 '18 at 19:57
`` does work IF those params exist, if not then I get an error: `Location "/" did not match any routes`. And yes react-router **v3** – its30 Apr 18 '18 at 20:03
@ians You need to add some realtive path, rather than directly giving params. – Chasing Unicorn - Anshu Apr 18 '18 at 20:21
@ChasingUnicorn `` works. So there is no way to add optional params at the route? – its30 Apr 18 '18 at 20:26
Checkout this post: https://stackoverflow.com/questions/35604617/react-router-with-optional-path-parameter . This might help. – Chasing Unicorn - Anshu Apr 18 '18 at 20:29
Upvoted thanks, still looking for an answer though:( – its30 Apr 18 '18 at 20:35

score 1 · Accepted Answer · edited Jul 04 '18 at 00:31

1

Had the same issue today. I managed to resolve it like this:

<Route path="/(:param1)(:/param2) component={SomeComponent}"

edited Jul 04 '18 at 00:31

Stephen Rauch

47,830
31
106
135

answered Jul 04 '18 at 00:15

dkanas

51
5

This works for me, not sure how I missed that configuration. – its30 Jul 17 '18 at 17:36

React-router optional path parameters at root

2 Answers2