Webpack React错误：您不应该在 ]之外使用 所以我正在尝试通过我的React应用程序设置服务器端渲染，到目前为止，我已经解决了所有问题，但是经过几天的尝试，我遇到了无法解决的问题。 我使用的是最新的所有内容，但遇到此错误：Error: Invariant failed: You should not use <Switch> outside a <Router> 下面是React App索引 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), }), ] } ] 感谢您的帮助，如果我错过任何信息，请告诉我，谢谢。 所以我正在尝试使用我的React应用程序设置服务器端渲染，到目前为止，我已经解决了所有问题，但是经过几天的尝试，我遇到了无法解决的问题。我正在使用... 将整个内容包装在<Router>中 export default class App extends React.Component { render() { return ( <Router> <Switch> <NavRoute exact={true} path="/" component={Home} /> </Switch> </Router> ); } }

Question

所以我正在尝试通过我的React应用程序设置服务器端渲染，到目前为止，我已经解决了所有问题，但是经过几天的尝试，我遇到了无法解决的问题。

我使用的是最新的所有内容，但遇到此错误：Error: Invariant failed: You should not use <Switch> outside a <Router>

下面是React App索引

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),
            }),
        ]
    }
]
感谢您的帮助，如果我错过任何信息，请告诉我，谢谢。
所以我正在尝试使用我的React应用程序设置服务器端渲染，到目前为止，我已经解决了所有问题，但是经过几天的尝试，我遇到了无法解决的问题。我正在使用...

将整个内容包装在<Router>中

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

Answer 1

将整个内容包装在<Router>中