How do I navigate without using Link or a href

[MarkNijhof]

I am looking for a way to navigate to a new route without using a Link component or plain a href tag, but instead in an onClickHandler. How should I do this so that if a route is matched it will be triggered else a server request is made?

[parshap]

Use the navigable mixin [1] and call this.navigate in your click handler.

As for falling back to a server request, you may be able to do that using a 404 handler, or by implementing your own router using the router mixin.

[1] https://github.com/andreypopp/react-router-component/blob/master/lib/NavigatableMixin.js

[MarkNijhof]

Is there an example for this because I tried that but didn't work for me

[MarkNijhof]

To be more precise I get the following error:
Uncaught TypeError: Cannot read property 'props' of undefined - cloneWithProps.js line 41

So I am sure I am missing something, but not sure what

[MarkNijhof]

OK I was being stupid, I forgot the contextual setting meant that my sub routes needed to be /xyz instead of /abc/xyz the error could be better like route not found or something but it does work

[MarkNijhof]

An other related question: I am in a context aware router and now I want to navigate one level up. When I just call this.navigate("/") it goes to the root of its context, how do I break out?

[STRML]

AFAIK you don't, you need a reference to the parent router, and you navigate from there.

[MarkNijhof]

Ah ok so I need to pass in the parent router via the props (or use callbacks down the chain again). I looked in the code and I saw that RouterMixin has getParentRouter but I needed more magic for that one as well

[chrisdew]

I'm also stuck on this.

What do I mix the NavigatableMixin into? The top level App?

How do I pass the navigatable method to the page?

I've tried adding the mixin to the App, but I get:

Uncaught TypeError: Cannot read property 'isPopState' of undefined    
Environment.js:55Environment.setPath Environment.js:55navigate 
Environment.js:51NavigatableMixin.navigate NavigatableMixin.js:31boundMethod 
ReactCompositeComponent.js:1435module.exports.React.createClass.handleAdd 
resources.js:84boundMethod ReactCompositeComponent.js:1435executeDispatch 
EventPluginUtils.js:118SimpleEventPlugin.executeDispatch 
SimpleEventPlugin.js:310forEachEventDispatch EventPluginUtils.js:106executeDispatchesInOrder 
EventPluginUtils.js:127executeDispatchesAndRelease EventPluginHub.js:57forEachAccumulated 
forEachAccumulated.js:32EventPluginHub.processEventQueue 
EventPluginHub.js:275runEventQueueInBatch ReactEventEmitterMixin.js:26Mixin.perform 
Transaction.js:160ReactDefaultBatchingStrategy.batchedUpdates 
ReactDefaultBatchingStrategy.js:70batchedUpdates 
ReactUpdates.js:36ReactEventEmitterMixin.handleTopLevel 
ReactEventEmitterMixin.js:53handleTopLevelImpl ReactEventTopLevelCallback.js:81(anonymous function)

[STRML]

You don't mix the NavigatableMixin into anything in most cases; that's advanced usage for custom routers.

Simply use <Locations> from within your root component, as in the README. See the Docs for more.

[MarkNijhof]

I am sorry but there is a real use-case for better usage of this.navigate("route"), not all navigation are pure links, many (in our case most) need to validate whether or not you can navigate to a next step, and before navigating if should submit some data. So the Link component is not sufficient for this (at least I have found it to be lacking in these scenario's).

When I am navigating within the same router context I mix the NavigatableMixin in the react components where I need to navigate from. This will enable you to use this.naviage("route") in any method, i.e. button onclick handler

Now I find having to pass in the parent router to be able to navigate to routes outside the current context also rather cumbersome, because it means pretty much passing it in all underlying components. So I'll be looking to see if I can build this in in a nice way (like the NavigatableMixin)

Other then this I am really happy with the output, I like to be able to specify a router for larger sub components of our system, much nicer then everything at the route of the app.

[STRML]

I am not saying that there is no use case, I am saying that it is advanced usage of this library and in most cases you are on your own. I am very happy to review and accept any useful PRs as extensions to this component.

As for passing the parent router into underlying components, there are a few ways I have seen developers combat this. First, if you don’t expect your application to be embedded in a page multiple times, you could do as Facebook sometimes does with their Flux implementation and simply attach your routers to singletons that can be require()d throughout your app.

Otherwise, you may have some luck with React’s experimental context support.

If you are building a Flux app you may also have some luck simply firing an action to the dispatcher that instructs it to grab the parent router and route the app at the root.

On Sep 15, 2014, at 12:45 PM, Mark Nijhof [email protected] wrote:

I am sorry but there is a real use-case for better usage of this.navigate("route"), not all navigation are pure links, many (in our case most) need to validate whether or not you can navigate to a next step, and before navigating if should submit some data. So the Link component is not sufficient for this (at least I have found it to be lacking in these scenario's).

When I am navigating within the same router context I mix the NavigatableMixin in the react components where I need to navigate from. This will enable you to use this.naviage("route") in any method, i.e. button onclick handler

Now I find having to pass in the parent router to be able to navigate to routes outside the current context also rather cumbersome, because it means pretty much passing it in all underlying components. So I'll be looking to see if I can build this in in a nice way (like the NavigatableMixin)

Other then this I am really happy with the output, I like to be able to specify a router for larger sub components of our system, much nicer then everything at the route of the app.

—
Reply to this email directly or view it on GitHub.

[MarkNijhof]

Thanks for your suggestions! I was thinking about a PR for sure :)

[MarkNijhof]

Hi,
I created a PR #82 that enables using ../ in your routes when using this.navigate which then looks for a higher level router (in a new context property called routers) to execute the part route after the ..

so this.navigate(../other_route') will call navigate('/other_route') on the higher level router

[MarkNijhof]

Also verified that this works with link [Link href="../other_route"]Home[/Link]

[MarkNijhof]

Curious what you think about my proposal for getting to a parent router

[chrisdew]

I've isolated my issue with NavigableMixin.

If I navigate to a page (which is directly included by a <Page...> element) and the getInitialStateAsync is at the page level, everything works well.

If I navigate to a page and the getInitialStateAsync is in a sub-element of the page, it breaks as getInitialStateAsync of the sub-element is not run before rendering.

If I <Link...> to such a page, or enter the URL directly, the sub-element's getInitialStateAsync is run and everything renders without an issue.

[chrisdew]

I will try to build a test case in a fork of react-quickstart. This will highlight whether the issue is in my code, or a real problem.

[chrisdew]

I've spun this issue out into its own ticket, as it seems to be an issue with react-async, rather than the NavigableMixin.

andreypopp/react-async#32

[STRML]

Looks like this is safe to close, please re-open or create a new issue if you still have outstanding problems.