How to navigate without Link? about redux-little-router HOT 11 CLOSED

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

from redux-little-router.

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'
});

from redux-little-router.

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

from redux-little-router.

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.

from redux-little-router.

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.

from redux-little-router.

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

from redux-little-router.

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! 👍

from redux-little-router.

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

from redux-little-router.

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)

from redux-little-router.

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

from redux-little-router.

@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 .

from redux-little-router.