0.0.11 • Published 6 years ago
redux-plain-router v0.0.11
A Redux router without any dependencies on React.
Install the package
npm install redux-plain-router
Initialize the router by adding the reducer and middleware to your store.
import router from 'redux-plain-router';
const store = createStore(
combineReducers({
[router.NAME]:router.reducer,
...
}),
initialState,
applyMiddleware([..., router.middleware()])
);
Inside your react app, create routes and match them to render the appropriate page.
Docs regarding the pattern syntax can be found here: www.npmjs.com/package/url-pattern
import React from 'react'
import { connect } from 'react-redux'
import { createRoutes } from 'redux-plain-router';
// Map your own pages
const pages = {
UserLogin: require('./../users').Login
, Dashboard: require('./../dashboard').Dashboard
}
// Create your own routes
const routes = createRoutes({
'UserLogin':'login(/)'
, 'Dashboard':'dashboard/:user(/)'
}, {
// optional, eg if :user is a number, the parameter will be converted into a Number
// otherwise it's returned as a string
parseNumbers:true
});
class App extends React.Component{
navigate(path){
setTimeout(_=>{
this.props.dispatch({
type:'ROUTER_LOCATION_CHANGE'
, payload:{ path }
});
},0)
}
render(){
const session = this.props.session
, router = this.props.router;
if(router.path == '') {
// No path defined, redirect to start page
if (session.user) {
this.navigate('dashboard/' + session.user);
} else {
this.navigate('login');
}
return <div>You're beeing redirected..</div>;
}else{
let params = routes.match(props.router.path);
if(!params){
return <div>
<p><strong>404</strong> Page not found. <a href="#">Go home</a></p>
</div>
}else{
if(!session.user){
// Show the login page without changing the url so the user
// can be redirected to current page after logging in
return React.createElement(pages.UserLogin);
}else if(pages[params.route]){
// Pass down route parameters to component
return React.createElement(pages[params.route], {route_params: params});
}else{
return <div>Route not defined</div>
}
}
}
}
}
const AppConnect = connect(
state=>({
router: state.router
, session: state.session
})
)(App);
export default AppConnect;
The middleware takes two optional arguments, getSetLocation() and listenLocationChange(). By default the router is configured to use the window.location.hash.
To use window.history.pushState, define the getStateLocation(). The function should always return the full pathname and search string if it exists (eg some/page?search=val). If the argument location is defined, then set the location.
applyMiddleware([..., router.middleware(getSetLocation, listenLocationChange)])