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> ); } }

问题描述 投票:0回答:1
所以我正在尝试通过我的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> ); } }

reactjs webpack react-router babel react-router-dom
1个回答
0
投票
将整个内容包装在<Router>
热门问题
推荐问题
最新问题