Как исправить React-Router только для рендеринга маршрута "/"? - PullRequest
Новая
       56

Как исправить React-Router только для рендеринга маршрута "/"?

0 голосов
/ 15 января 2019

У меня проблема с реакции-маршрутизатором, когда я использую «Маршрут» с веб-пакетом React-Router только отображает маршрут "/". Мой код прост.

Проект React находится в github. https://github.com/hcsgzh/testapp

В проекте три маршрута.

"/ главный"

"/"

"о"

Проблема в том, что React-Router отображает только маршрут "/", если я использую webpack и babel для генерации bundle.js. Но когда я использую «реакции-скрипты запускаются», React-Router будет отображаться правильно.

Я не думаю, что у моего кода есть проблемы, потому что, когда я запускаю тот же код с использованием реагирующих скриптов, запускаются. React-Router будет отображаться правильно.

Однако, если я запускаю тот же код с помощью веб-пакета --mode development и запускаю код. 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>
    );
  }
}

Я также считаю, что bundle.js, сгенерированный webpack и babel, будет другим. 

_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");
}
})));
}
}]);

Этот код генерируется с помощью webpack и babel, если вы используете прикрепленный реактивный проект и запускаете "npm run dev". 

      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"]);

Этот код генерируется запуском "response-scripts start".

Может ли кто-нибудь помочь мне здесь? Что случилось с моим конфигом webpack или babelrc?

Я хочу использовать webpack для создания файла bundle.js.

Вы можете попробовать мой проект (https://github.com/hcsgzh/testapp), используя npm start и npm run watch, чтобы увидеть разные результаты.

Я думаю, что проблема заключается в том, что babel перевел JSX-код, а JSX-код результата отличается, когда я использую сценарий реакции-запуск и запуск веб-пакета --mode.

React-скрипты будут правильно переводить код, но веб-пакет будет переводить неправильно. Следовательно, я думаю, что проблема из Библии. Возможно, моя бабушка не настроена должным образом. Может ли кто-нибудь взглянуть на мой файл .babelrc? и, пожалуйста, объясните мне. 

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

Спасибо

Конец

Я понял проблему.

На самом деле, речь идет не о React-Router или моей конфигурации babel. Это из-за разных маршрутов, которые не могут соответствовать файлу index.html. Этот проект testapp использовал reload для сервера приложения реакции. Перезагрузка не соответствует каждому маршруту к index.html.

Решение

Обрабатывает любые запросы, которые не соответствуют бэкэнд-API, index.html

Например, если вы используете экспресс в качестве бэкэнда для своего реактивного приложения, вам нужен код ниже. 

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», я получу контент, как и ожидал. Также для маршрутов "/" и "о", я получу правильный контент.

Итак, «проблема» решена.

...