Closed deser closed 8 years ago
import {Router, browserHistory} from 'react-router';
This doesn't work ReactDOM.render(<Router history={useNamedRoutes(browserHistory)({ routes })}>{routes}</Router>, container);
That's because that's not the right syntax for any version of React Router. Read the docs.
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
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.
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
?
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.
@taion I don't comprehend what you're saying. Are you saying it's not possible to use this with react-router-redux?
It works just fine. You just need to create a custom history.
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.
Strongly recommend against doing that. Just create your own custom history. It's documented extensively in multiple places.
Yes, why wouldn't it?