Router Custom

router.js

// Assuming you have a Component Dashboard, AnotherComponent, conditionally render based on props
const ROUTES = [
	{
		test: /\/another$/,
		Component: Dashboard
	},
	{
		test: /\/foo$/,
		Component: Dashboard
	},
	{
		test: /\/bar\/(\d|\D)*$/,
		Component: AnotherComponent
	}
];

class Router extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			path: props.history.location.pathname,
			previousPath: "/",
			query: parseQueryString(props.history.location.search.substring(1)),
			previousQuery: {}
		};
	}
	componentDidMount() {
		this.detachHistory = this.props.history.listen(location => (
			this.setState({
				path: location.pathname,
				previousPath: this.state.path,
				query: parseQueryString(this.props.history.location.search.substring(1)),
				previousQuery: this.state.query
			})
		));
	}
	componentWillReceiveProps(nextProps) {
		if (nextProps.user && !this.props.user) {
      console.log("AHHHHHHHHHH");
		}
	}
	componentWillUnmount() {
		this.detachHistory();
	}
	render() {
		/* wait before rendering child components */
		if (!this.props.user) {
			return null;
		}
		const Route = ROUTES.find(({ test }) => test.test(this.state.path)) || { Component: Dashboard };
		return <Route.Component {...this.state} {...this.props} />;
	}
}