I'm using connected-react-router with my react redux app. I need server side rendering and client side rendering (I'm using a react component in a symfony twig template via limenius react bundle).
My probleme is that i cannot use basename properly. I have a locale isocode in my URL (www.localhost.com/fr/mypage)
If i declare a basename '/fr/' in history:
<Route exact path={`/${isocode}/checkout/customize`} component={Customize} />
works !
... but I want this :
<Route exact path="checkout/customize" component={Customize} />
and it does not work !
What i have in my app.js:
export const App = () => {
const store = ReactOnRails.getStore('CustomizeStore');
const state = store.getState();
const { isocode } = state.general.data.locale;
const history = createHistory({
basename: `/${isocode}/`,
initialEntries: [state.router.location.pathname],
});
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route exact path={`/${isocode}/checkout/customize`} component={Customize} />
</Switch>
</ConnectedRouter>
</Provider>
);
};
and in my store.js
export const createHistory = historyConfig =>
isServer ? createMemoryHistory(historyConfig) : createBrowserHistory();
export default (props, context) => {
const { baseURL } = props.general.data.api;
const { isocode } = props.general.data.locale;
const history = createHistory({ basename: `/${isocode}/`, initialEntries: [context.pathname] });
return createStore(
reducers(history),
{ ...props },
composeEnhancers(
applyMiddleware(thunk, routerMiddleware(history)),
),
);
};
What i expect in my app.js:
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route exact path="checkout/customize" component={Customize} />
</Switch>
</ConnectedRouter>
</Provider>
I've read that the basename for "browserRouter" and "staticRouter" provided by react-router should be declared in history props of ConnectRouter component.
What I'm doing wrong ? Is connect-react-router a good choice for my redux ssr application or should i use react-router ? (I'm using immutable.js and i want to implement hot-reloading if possible =)
A big thanks !
几天前我遇到了同样的问题,我通过在createBrowserHistory
设置basename
来解决它,如下所示:
const history = createBrowserHistory({ basename: “/baseName” })
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.