React-router v4 nested routes & programmatic navigation

Question

So, I have a few routes set up in this fashion:

index.js

<Route exact path={pathDefault} component={Home}>
    <Route path={path1} component={component1}/>
    <Route path={path2} component={component2}/>
</Route>

component1.js

<Route exact path={`${props.match.url}`} component={Summary}/>
<Route path={`${props.match.url}`/someOtherPath1} component={SubComponent1}/>
<Route path={`${props.match.url}`/someOtherPath2} component={SubComponent2}/>

component2.js is set up similarly.

The idea here is that I have multiple top-level routes, which have default pages. But, then sub-routes that can be switched between. This works ok, until, when at one of the sub-level routes like component1/someOtherPath2 I can switch between someOtherPath1 and someOtherPath2, but if I then try to change one of the top level routes using history.push(path2), instead of going back to a top level component (i.e. path1's default component), it ends up pushing a compounded, and thus incorrect route, like component1/component2.

So, how would you change a higher-level route when in a lower level component programmatically (preferably using history.push or similar)?

You can use history.push as long as you import history from whenever you inject it into your react-router. Once you import this into your component you can just use history.push like normal. Let me know if you get stuck and I'll create a sandbox for you. — Win
– Win, Commented Oct 14, 2017 at 11:05
What do you mean import it from when I inject it? You mean something like setting up <BrowserHistory>? — Araymer
– Araymer, Commented Oct 14, 2017 at 19:43
I should mention, I'm using withRouter on the components to get history on the props. — Araymer
– Araymer, Commented Oct 15, 2017 at 5:26

patotoma · Accepted Answer · 2017-10-16 12:10:59Z

1

+50

history.push takes path as an argument and not component:

history.push(path, [state])

for example:

history.push('/home');

or

history.push('/home', { some: 'state' });

you can read more about it in the docs.

EDIT:

also don't forget the leading / if you want to change the root path. For example:

history.push('/path1/path2');

edited Oct 16, 2017 at 12:10

answered Oct 14, 2017 at 11:07

patotoma

1,1192 gold badges11 silver badges17 bronze badges

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

4 Comments

Araymer Over a year ago

I'm handing the path to the component, which is the same name as the component. Sorry for the confusion. I'll edit for clarity.

patotoma Over a year ago

@Araymer when you want to change the root path are you starting with the /? Like history.push('/path1/path2');

Araymer Over a year ago

I get an error when I try to add a slash on the front saying:

Failed to execute 'pushState' on 'History': A history state object with URL 'http://path_to/classify_records' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://localhost:3000/path_to'.

Araymer Over a year ago

Ok, nevermind, that looked like the issue. For some reason, when I appended a single slash it was doubling the slash. That's a bug I can fix easily. But, it's working now. If you want to edit your answer, I can give you the points. There was just something wrong with my path building somewhere along the line.

Collectives™ on Stack Overflow

React-router v4 nested routes & programmatic navigation

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related