How do i manage custom props like 'isInnerPage' within router reducer? - reactjs

Question

I use connected-react-router and have some types of pages: main, inner, auth, admin. Depends of current page type I render certain components. Now it works in this way: there are 4 props in my config reducer with bool values: isMainPage, isInnerPage, isAdminPage, isAuthPage, and only one of them could be true in a time. They changes any time I change location (by executing certain action in componentDidMount). So, I want to deal with connected-react-router and, if possible, pass these props from config reducer to the router. Then, if possible, I want to execute an action that will define current page type and set it and then I would get this val in components. Is it all possible? Sorry for this explanation - I'm just studying.
I would provide some code but I don't know which part could be helpful - ask for one, please
config reducer:
import {
SET_VIEW_MODE,
SET_AUTH_PAGE,
SET_MAIN_PAGE,
SET_INNER_PAGE,
SET_ADMIN_PAGE,
...
} from '../constants';
...
case SET_AUTH_PAGE:
return {
...state,
isAuthPage: true,
isMainPage: false,
isInnerPage: false,
isAdminPage: false
};
case SET_MAIN_PAGE:
return {
...state,
isAuthPage: false,
isMainPage: true,
isInnerPage: false,
isAdminPage: false
};
case SET_INNER_PAGE:
return {
...state,
isAuthPage: false,
isMainPage: false,
isInnerPage: true,
isAdminPage: false
};
case SET_ADMIN_PAGE:
return {
...state,
isAuthPage: false,
isMainPage: false,
isInnerPage: false,
isAdminPage: true
};
config actions:
...imports;
export const actionSetViewMode = () => ({ type: SET_VIEW_MODE });
export const actionSetAuthPage = () => ({ type: SET_AUTH_PAGE });
export const actionSetMainPage = () => ({ type: SET_MAIN_PAGE });
export const actionSetInnerPage = () => ({ type: SET_INNER_PAGE });
expample of component that sets any type:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionSetMainPage } from '../actions/configActions';
...
class MainPage extends Component {
componentDidMount() {
this.props.actionSetMainPage();
}
render() {
return (
<>
...
</>
)
}
}
export default connect(null, {
actionSetMainPage,
})(MainPage);
example of component that renders any depends of page type:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import Subaction from '../components/header/Subaction';
import Back from '../components/header/Back';
import Menu from '../components/header/Menu';
import Title from '../components/header/Title';
import Logo from '../components/header/Logo';
import Notification from '../components/header/Notification';
class Header extends Component {
render() {
const { isAdaptive, isAuthPage, isMainPage, isInnerPage, title } = this.props.config;
return (
!isAuthPage &&
<header>
<div className="h-inner">
...
{
isMainPage &&
<Logo></Logo>
}
<Notification></Notification>
...
</div>
</header>
)
}
}
export default connect(state => ({
config: state.config
}), {})(Header);