How to navigate without Link?

[marcselman]

How can I navigate to another route without using a Link component.
For example as a response of another action or a websocket call or something linke that.
Or can I somehow dispatch a REPLACE or PUSH action which the router picks up?
And is there a method I can use to create the action object (action-creator)?

Thanks

[tptee]

Hey there! Right now there's a bug in the store enhancer that prevents dispatching router events within middleware (#36), so I'm not encouraging this use case until that's fixed (should be soon). If you look at the Link source, you can see an example of where we dispatch PUSH or REPLACE events. These do currently work when dispatching from React components or async action creators.

Here's an issue tracking the documentation of these actions, blocked by #36: #44

I'm hoping to fix this bug and give you a real answer soon! 👍

[philipyoungg]

Really hope this could be fixed soon. Meanwhile, I hacked this by dispatching 'ROUTE_LOCATION_CHANGED' with manually generated payload.

[joshhunt]

Still kind of lost on this one. I've seen the ROUTE_LOCATION_CHANGED action creator and type, but I'm unsure as to whether I'm supposed to use that to trigger a page transition (like a 'redirect' after successful login)

[BigBuckBunny]

Within Link.js is the handleClick method that dispatches the constants of action-types. The following works for me on different routes.

dispatch({
type: 'ROUTER_PUSH',
payload: '/about'
});

[ngbrown]

I pulled much of the functions of <Link /> component into separate utility file.

https://gist.github.com/ngbrown/d1874f93beebc3e6724217f88cc2d295

The only real complication is that the containing component needs to reference the router from context.

You use it like this:

import React from "react";
import {Navbar, Nav, NavItem, FormGroup, FormControl} from "react-bootstrap";

import {handleClickNav, handleOnSubmitNav} from "./utilities.js";

export default function AppNavbar(props, context) {
  const {router} = context;

  return (
    <Navbar>
      <Navbar.Form pullLeft>
        <form action="/search" onSubmit={handleOnSubmitNav(router, "/search")}>
          <FormGroup>
            <FormControl type="text" placeholder="Search" name="q" />
          </FormGroup>
        </form>
      </Navbar.Form>
      <Nav>
        <NavItem href="/items" onClick={handleClickNav(router, "/items")}>View Items</NavItem>
      </Nav>
    </Navbar>
  );
}

AppNavbar.contextTypes = {
  router: React.PropTypes.object
};

I think that these utility functions should become part of the normal redux-little-router API. See the gist for a start. Branch and improve it if you have any suggestions.

This should also work with universal, server-rendered, output where the client doesn't have JavaScript enabled.

[johnmw]

As a beginner, here was the bare minimum I needed to get a react-bootstrap Nav component working with the router. If you need more complex URL routing, please consider the above post. Something like these examples would be a nice addition to the docs. :-)

import React from 'react';
import {connect} from 'react-redux';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import {PUSH} from 'redux-little-router';

const NavRouter = ({dispatch}) => {

  const handleSelect = selectedKey => {
    dispatch({ type: PUSH, payload: { pathname: selectedKey /* OPTIONAL , query: {search: 'cats'} */ } })
  }

  return (
    <div>
      <Nav bsStyle="pills" onSelect={handleSelect}>
        <NavItem eventKey={'/page1'} href="/page1">Page1</NavItem>
        <NavItem eventKey={'/page2'} href="/page2">Page2</NavItem>
      </Nav>
    </div>
  );
};

export default connect()(NavRouter); // empty connect() passes component the {dispatch} function

[MrLoh]

@BigBuckBunny thanks for the temporary fix. Would be really great if this could be included soon or at least documented. I think this is one of the main advantages of this library over react-router .

[tptee]

Stay tuned, I'm including a real fix for this in the next major version 👍

[sethsnel]

Dear @tptee, have you deployed the real fix yet? Thanks in advance.

[cafreeman]

I'm also interested in this fix! Just ran into this same issue and am about to start dispatching 'PUSH' actions, but it'd be great if there were an official way to handle this case.

[tptee]

Hey all, I totally overlooked closing this issue–v13 and higher have official navigation action creators: https://github.com/FormidableLabs/redux-little-router#provided-actions-and-state