callum / redux-routing Goto Github PK

Hello! Please, give an example, how to work with urls, containing #hash. It seems to be impossible, because matcher matches handlers only by pathname:
var matched = route.matcher.match(parsed.pathname);

I'm getting such kind of error when try to use 'back' button. Although 'back' works, but meantime - error at console.

https://www.dropbox.com/s/0u3beyk0cljwyvw/Screenshot%202016-01-26%2002.20.17.png?dl=0

👋 Hello!

I'd like to use redux-routing in browser without a build step or a bundler. "Crazy talk" I hear you say? Well, Edge(!), Chrome, and Safari support import out of the box, and it's behind a flag in FF and Opera, so yeah, welcome to the future.

There are a few hitches in the browser, though. There's no module resolution, so the browser needs a relative or fully qualified path to the file containing the module. In most cases, that's easy: just append .js to the module import statement's path.

redux-routing adds a few interesting bits to the mix. It makes use of node's url, querystring, and path-parser libs. For url and querystring, there are browser-native APIs which can do the trick (or be polyfilled to do the trick), but path-parser is a somewhat different story, as they don't publish es-modules with relative paths-to-files.

I've created a fork which attempts to implement these changes, except for the path-parser code, which I'm at a loss for solutions ATM.

Thank you for considering my proposal.

B

right now i have this helper:

const routes = {
    index: route('/', IndexView),
    documentList: route('/document', DocumentListView),
    documentView: route('/document/:id', DocumentView)
};

export const constructUrl = (url, options) => {
    let { matcher } = (routes.hasOwnProperty(url) ? routes[url] : { matcher: null});
    options = options || {};

    if(!matcher) {
        matcher = new Path(url);
    }

    if(matcher.hasUrlParams) {
        return matcher.params.reduce(function pathReducer(injected, key) {
            if(!options.hasOwnProperty(key)) {
                throw new Error('No value for param "' + key + '" of route: ' + injected);
            }

            return injected.replace(':'+key, encodeURIComponent(options[key]));
        }, matcher.path);
    }

    return matcher.path;
};

export default routes

later i can use it like:

class Link extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        e.preventDefault();
        this.props.dispatch(navigate(e.target.href));
    }

    render() {
        const { onCLick, href, params, children, ...props} = this.props;
        let url = constructUrl(href, params);

        return (
            <a {...props} href={url} onClick={this.handleClick}>{children}</a>
        );
    }
}

Link.propTypes = {
    href: PropTypes.string,
    params: PropTypes.object,
    children: PropTypes.node.isRequired
};

export default connect()(Link);

and usage:

<Link href="documentList">Link to document list</Link>

or

<Link href="/document/:id" params={{id: 10}}>Link to view document</Link>

or

<Link href="documentView" params={{id: 10}}>Link to view document</Link>

i think it would be nice to have such kind of helper at your lib by default.

I am enjoying your minimal but effective library. However, I am having difficulty with this use case: I have a middleware that examines the authentication state and the current navigation path to decide if to send the user to a sign in page. It's based on this example for a similar but neglected library.

The problem is that the URL isn't parsed until it passes through the middleware. This means that the content of the action differs based on the order that middlewares are added when creating the store.

I suggest moving the URL parsing bit from the middleware to the action creators so that the action payload is always in its final form. I also recommend exporting the constants.

I'd be glad to put together a pull request if you like.

looks like 'modal' windows fit nice with such routing, but the only exception - i don't want to replace application root, i want to replace other root - root of modals. So right now i have to almost duplicate everything. I tried to create 'modalMiddleware' and put it before your middleWare to intercept 'modal links', but was not success. So maybe some advice? The main idea is:

root for common pages

<div id='root'/>

and root for modal pages

<div id='modal'/>

both will use same store and same routes. Actually i would like to use history too. So as i said, looks like your router can handle it, but i can't solve this task yet. So i will glad for any help.

Hello. Can you provide more 'client-side' only routing? How exactly to make routing? Looks like i did everything from example, but not working (only index path is showing):

import IndexView from 'views/IndexView/IndexView'
import FooView from 'views/FooView/FooView'
import FooListView from 'views/FooListView/FooListView'

const routes = [
    route('/', IndexView),
    route('/foo', FooListView),
    route('/foo/:bar', FooView)
];

and views like this:

import React from 'react'
import { navigate } from 'redux-routing'

export default class IndexView extends React.Component {
    render() {
        //this.props.dispatch(navigate('/foo'));
        return <div>IndexView <a href="/foo">Foo</a></div>
    }
}

import React from 'react'

export default class FooListView extends React.Component {
    render() {
        return <div>FooListView !!!!</div>
    }
}

and configure store like this:

export default function configureStore (initialState) {
    let middleware = applyMiddleware(thunk, createMiddleware(Hash));
    if (__DEBUG__) {
        var createLogger = require('redux-logger');
        middleware = applyMiddleware(createLogger());
    }

    const store = middleware(createStore)(rootReducer, initialState);
    return store;
}

Add a Link component like react-router will reduce lots of codes.