taion / use-named-routes

[No Maintenance Intended] Drop-in named route support for React Router
MIT License
105 stars 8 forks source link

Does it support react-router 2.3.0? #14

Closed deser closed 8 years ago

taion commented 8 years ago

Yes, why wouldn't it?

deser commented 8 years ago

import {Router, browserHistory} from 'react-router';

This doesn't work ReactDOM.render(<Router history={useNamedRoutes(browserHistory)({ routes })}>{routes}</Router>, container);

taion commented 8 years ago

That's because that's not the right syntax for any version of React Router. Read the docs.

deser commented 8 years ago

Hm... So I see in react-router docs:

import { browserHistory } from 'react-router'
ReactDOM.render(<Router history={browserHistory} />, el)

And I see use-named-routes description:

// The order of history enhancers matters here.
const history = useNamedRoutes(useRouterHistory(createHistory))({ routes });

ReactDOM.render(
  <Router history={history} routes={routes} />,
  mountNode
);

In changelog I see this: https://monosnap.com/file/v7TaeDiDlE8quyd2Nya0HZ1SXlsPqH

So how should I utilize useNamedRoutes then according to docs? :)

This useRouterHistory(createHistory) seems to me react-router 1.x syntax

taion commented 8 years ago

You can still use the old syntax, and in this case you have to – the history singletons are only if you don't need additional customization.

evenfrost commented 8 years ago

It doesn't work with browserHistory, which in turn is needed for react-router-redux's push to work properly. @talon, can you please update examples/code to utilize browserHistory instead of history?

taion commented 8 years ago

That's not how react-router-redux's action integration works. And anyway it's not supposed to work with an existing history – that's just how history enhancers work.

dfee commented 7 years ago

@taion I don't comprehend what you're saying. Are you saying it's not possible to use this with react-router-redux?

taion commented 7 years ago

It works just fine. You just need to create a custom history.

evenfrost commented 7 years ago

Since it's definitely not working with latest react-router-redux as it should, I've dropped this lib in favor of custom routes map, which I utilize like this (single route example, using router-parser lib):

// routes.js
import RouteParser from 'route-parser';

const setRoutePath = (pathname, params) =>
  (_.isUndefined(params) ? pathname : new RouteParser(pathname).reverse(params));

export const place = {
  path: params => setRoutePath('/places/:id', params),
  parser: new RouteParser('/places/:id'),
};
// index.js
import { Router, Route, IndexRoute, Redirect, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import * as routes from 'routes';

const history = syncHistoryWithStore(browserHistory, store);
// ...
export default () => (
  <Provider store={store}>
    <Router history={history}>
        <Route path={routes.place.path()} component={Place} />
    </Router>
  </Provider>
);
// somewhere.js
import { place as placeRoute } from 'routes';
// go to route using react-router-redux's 'push'
dispatch(push(placeRoute.path({ id })));

Hope this helps.

taion commented 7 years ago

Strongly recommend against doing that. Just create your own custom history. It's documented extensively in multiple places.