结局

Question

当我在webpack中使用“路由”时，我对react-router有问题。 React-Router仅呈现“ /”路由。我的代码很简单。

React项目位于github中。 https://github.com/hcsgzh/testapp

项目中有3条路线。

“ /主要”

“ /”

“关于”

问题是React-Router仅呈现“ /”路由，如果我使用webpack和babel生成bundle.js。但是当我使用“ react-scripts start”时，React-Router将正确呈现。

我认为我的代码没有问题，因为当我通过使用react-scripts start运行相同的代码时。 React-Router将正确呈现。

但是，如果我使用webpack --mode开发来运行相同的代码并运行该代码。 React-Router将仅呈现“ /”路由。

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

export default class extends Component {

  state = {}
  render() {
    return (<BrowserRouter>
        <Switch>
          <Route path="/main" render={ ()=><h2>Main</h2> }/>
          <Route path="/" exact render={ ()=><h2>Home</h2> }/>
          <Route path="/about" render={ ()=><h2>About</h2> }/>
        </Switch>
    </BrowserRouter>
    );
  }
}

我还发现webpack和babel生成的bundle.js会有所不同。

_createClass(_default, [{
    key: "render",
    value: function render() {
      return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["BrowserRouter"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Switch"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Route"], {
        path: "/main",
        render: function render() {
          return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", null, "Main");
}
}), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Route"], {
        path: "/",
        exact: true,
        render: function render() {
          return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", null, "Home");
}
}), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Route"], {
        path: "/about",
        render: function render() {
          return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", null, "About");
}
})));
}
}]);

如果您使用附加的react项目并运行“ npm run dev”，则使用webpack和babel生成此代码。

      Object(C_node_reactJS_testapp_node_modules_babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_1__["default"])(_default, [{
        key: "render",
        value: function render() {
          return react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__["BrowserRouter"], {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 14
},
            __self: this
}, react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__["Switch"], {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 15
},
            __self: this
}, react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__["Route"], {
            path: "/main",
            render: function render() {
              return react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("h2", {
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 16
},
                __self: this
}, "Main");
},
            __source: {
              fileName: _jsxFileName,
              lineNumber: 16
},
            __self: this
}), react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__["Route"], {
            path: "/",
            exact: true,
            render: function render() {
              return react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("h2", {
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 17
},
                __self: this
}, "Home");
},
            __source: {
              fileName: _jsxFileName,
              lineNumber: 17
},
            __self: this
}), react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__["Route"], {
            path: "/about",
            render: function render() {
              return react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("h2", {
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 18
},
                __self: this
}, "About");
},
            __source: {
              fileName: _jsxFileName,
              lineNumber: 18
},
            __self: this
})));
}
}]);

      return _default;
}(react__WEBPACK_IMPORTED_MODULE_5__["Component"]);

此代码是通过运行“ react-scripts start”生成的。

有人可以在这里给我帮助吗？我的webpack配置或babelrc磨损了什么？

我想使用webpack生成bundle.js文件。

您可以尝试使用npm start和npm run watch来查看我的项目（https://github.com/hcsgzh/testapp）。

我认为问题出在babel翻译了JSX代码后，当我使用react-scripts start和webpack --mode development时结果JS代码不同。

反应脚本将正确翻译代码，但webpack将翻译错误。因此，我想问题出在圣经上。也许我的babel配置不正确。有人可以看看我的.babelrc文件吗？请向我解释。

{
    "presets": [
        "@babel/env", "@babel/react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

谢谢

结局

我发现了问题所在。

实际上，这与React-Router或我的babel配置无关。这是因为无法匹配index.html文件的不同路由。该testapp项目用于重新加载以服务react应用。重新加载并不匹配到index.html的所有路由。

解决方案

处理与后端API不匹配的所有请求到index.html

例如，如果您使用express作为您的react应用程序的后端，则需要下面的代码。

app.get('*', (req,res) =>{
//make sure here is your production path if you deploy your app
    res.sendFile(__dirname+'/public/index.html'); 
});

使用上面的代码，如果我打了诸如“ localhost：3000 / main”之类的路由，则将获得预期的内容。同样对于路线“ /”和“关于”，我将获得正确的内容。

因此，“问题”得以解决。

如何修复仅呈现“ /”路由的React-Router？

结局

解决方案

0 个答案: