Ошибка Webpack React: Вы не должны использовать <Switch>вне <Router>

Question

, поэтому я пытаюсь настроить рендеринг на стороне сервера с помощью своего приложения React, и я до сих пор решил все проблемы, но столкнулся с этой, которую не могу решить после нескольких дней попыток.

IЯ использую последние из всего включенного, и я сталкиваюсь с этой ошибкой: Error: Invariant failed: You should not use <Switch> outside a <Router>

Ниже приведен индекс приложения реакции

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter  } from 'react-router-dom';

const SSR = (
    <BrowserRouter>
        <App/>
    </BrowserRouter>
);

if(typeof document === "undefined") {
    module.exports = SSR;
} else {
    ReactDOM.hydrate(SSR, document.getElementById("app"));
}

И компонент

import React from 'react';
import { Route, Switch } from 'react-router-dom'

import Home from './components/index'

const NavRoute = ({exact, path, component: Component}) => (
    <Route exact={exact} path={path} render={(props) => (
        <React.Fragment>
            <Navbar/>
            <Component {...props}/>
        </React.Fragment>
    )}/>
)

export default class App extends React.Component {
    render() {    
        return (
            <Switch>
                <NavRoute exact={true} path="/" component={Home}/>
            </Switch>
        );
    }
}

И мой конфиг webpack

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = [
    {
        entry: {
            client: './server/index.js',
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: "[name].js",
            publicPath: '/',
        },
        target: 'node',
        externals: [nodeExternals()],
        module: {
            rules: [
                { test: /\.jsx?/, loader: "babel-loader"}
            ]   
        },

    },
    {
        entry: {
            bundle: './src/App.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: "[name].js",
            publicPath: '/',
            libraryTarget: "umd",
            globalObject: "this",
        },
        module: {
            rules: [
                { test: /\.jsx?/, loader: "babel-loader"}
            ]   
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env.BROWSER': JSON.stringify(true),
            }),
        ]
    }
]

любая помощь приветствуется, дайте мне знать, если я пропустил какую-либо информацию, спасибо.