connected-react-router-lite v0.0.1-alpha
Work in progress
don't use it yet :)
Connected React Router Lite
A fork of connected-react-router to support react-router v6 with reduced API surface.
Originally created by Supasate Choochaisri
Supported features
Synchronize router state with redux store through uni-directional flow (i.e. history -> store -> router -> components).
Supports React Router v6.
Dispatching of history methods (
push
,replace
,go
,back
,forward
) works for both redux-thunk and redux-saga.Supports time traveling in Redux DevTools.
Supports TypeScript
Removed features
- Does not support immutable.js and seamless-immutable
- Does not support react-router v4, v5
- Does not support history v4
Installation
Connected React Router requires React 17 and React Redux 7.1 or later.
$ npm install --save connected-react-router-lite
Or
$ yarn add connected-react-router-lite
Usage
Step 1
In your root reducer file,
- Create a function that takes
history
as an argument and returns a root reducer. - Add
router
reducer into root reducer by passinghistory
tocreateRouterReducer
. Note: The key MUST be
'router'
.
// reducers.js
import { combineReducers } from "redux";
import { createRouterReducer } from "connected-react-router-lite";
import { History } from "history";
export const createRootReducer = (history: History) => combineReducers({
router: createRouterReducer(history),
... // rest of your reducers
});
Step 2
When creating a Redux store,
- Create a
history
object. - Provide the created
history
to the root reducer creator. - Use
routerMiddleware(history)
if you want to dispatch history actions (e.g. to change URL withpush('/path/to/somewhere')
).
// configureStore.js
...
import { createBrowserHistory } from "history";
import { applyMiddleware, compose, createStore } from "redux";
import { routerMiddleware } from "connected-react-router-lite";
import { createRootReducer } from "./reducers";
...
export const history = createBrowserHistory();
export function configureStore(preloadedState) {
const rootReducer = createRootReducer(history);
const store = createStore(
rootReducer,
preloadedState,
compose(
applyMiddleware(
routerMiddleware(history), // for dispatching history actions
// ... other middlewares ...
),
),
);
return store;
}
Step 3
- Wrap your react-router v6 routing with
ConnectedRouter
and pass thehistory
object as a prop. - Place
ConnectedRouter
as a child ofreact-redux
'sProvider
. - N.B. If doing server-side rendering, you should still use the
StaticRouter
fromreact-router
on the server.
// index.js
...
import { Provider } from "react-redux";
import { Route, Routes } from "react-router";
import { ConnectedRouter } from "connected-react-router-lite";
import { configureStore, history } from "./configureStore";
...
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<>
<Routes>
<Route exact path="/" render={<div>Match</div>} />
<Route element={<div>Miss</div>} />
</Routes>
</>
</ConnectedRouter>
</Provider>,
document.getElementById("react-root"),
);
Note: the history
object provided to router
reducer, routerMiddleware
, and ConnectedRouter
component must be the same history
object.
Now, it's ready to work!
<!-- Examples
See the examples folder
FAQ
- How to navigate with Redux action
- How to get the current browser location (URL)
- How to set Router props e.g. basename, initialEntries, etc.
- How to hot reload functional components
- How to hot reload reducers
- How to support Immutable.js
- How to implement server-side rendering (sample codebase)
- How to migrate from v4 to v5
- How to use connected-react-router with react native
- How to use your own context with react-redux -->
Build
yarn build
Generated files will be in the lib
folder.
Development
When testing the example apps with npm link
or yarn link
, you should explicitly provide the same Context
to both Provider
and ConnectedRouter
to make sure that the ConnectedRouter
doesn't pick up a different ReactReduxContext
from a different node_modules
folder.
In index.js
.
...
import { Provider, ReactReduxContext } from 'react-redux'
...
<Provider store={store} context={ReactReduxContext}>
<App history={history} context={ReactReduxContext} />
</Provider>
...
In App.js
,
...
const App = ({ history, context }) => {
return (
<ConnectedRouter history={history} context={context}>
{ routes }
</ConnectedRouter>
)
}
...
Contributors
See Contributors and Acknowledge.
License
3 years ago