Как в React Router перейти не на компонент, а на страницу?

Question

Shato Daltsaev @Shatoidil

React

Как в React Router перейти не на компонент, а на страницу?

Пишу не совсем типичный проект на react. Мне нужно перейти не на компонент, а именно на страницу. Все хорошо он в адресной строке прописывает путь к странице, но не совершает на нее переход. Мне не нужен Spa, нужно просто, чтобы он перешел поэтому пути. Как это можно сделать?
Как это сейчас выглядит:

const navItems = [
    { to: '/', name: 'Дизайн сайта', exact: true, Icon: MdDashboard },
    { to: '/Forms', name: 'Форма', exact: false, Icon: MdWeb },
    { to: '/Products', name: 'Продукты', exact: false,  Icon: MdInsertChart },
    { to: '/Admin', name: 'Администрирование', exact: false, Icon: MdWidgets },
    { to: '/PaymentByCard', name: 'Частичная оплата картой', exact: false, Icon: MdContactMail },
    { to: '/Settings', name: 'Настройки', exact: false, Icon: MdWidgets }

];


class Sidebar extends React.Component {
    state = {
        isOpenComponents: true,
        isOpenContents: true,
        isOpenPages: true,
    };

    render() {
        return (
            <Router>
            <aside className="cr-sidebar cr-sidebar--open" data-image={sidebarBgImage}>
                <div className="cr-sidebar__background" />

                <div className="cr-sidebar__content">
                    <Navbar>
                        <div className="navbar-brand d-flex">
                            <img
                                src={logo200Image}
                                width="40"
                                height="30"
                                className="pr-2"
                                alt=""
                            />
                            <span className="text-white">
                                Action/BackOffice
                            </span>
                        </div>
                    </Navbar>
                    <Nav vertical>
                            {navItems.map(({ to, name, exact, Icon }, index) => (

                            <NavItem key={index} className='nav-item'>
                                <BSNavLink
                                    id={`navItem-${name}-${index}`}
                                    tag={NavLink}
                                    className="text-uppercase"
                                    to={to}
                                    activeClassName="active"
                                    exact={exact}
                                    >
                                    <Icon className='cr-sidebar__nav-item-icon' />
                                    <span className="">{name}</span>
                                </BSNavLink>
                            </NavItem>
                        ))}
                        </Nav>

                        <Switch>
                            <Route path="/"  />
                            <Route path="/Forms"  />
                            <Route path="/Products" />
                            <Route path="/Admin" />
                            <Route path="/PaymentByCard" ref='' />
                            <Route path="/Settings" />
                        </Switch>


                </div>
            </aside>
            </Router>
        );
    }
}

export default Sidebar;