Vi phạm bất biến: Tuyến đường gốc phải hiển thị lỗi phần tử đơn trong định tuyến động phản ứng 2 router

Question

Tôi có ứng dụng Hello World đơn giản với một tuyến đường không có lộ trình con hoặc tuyến chỉ mục. Để định tuyến tôi sử dụng plain routes thay vì sysntax jsx. Một lần nữa tôi đang sử dụng dynamic routing của bộ phản ứng-router để tải thành phần Hello với webpack. Tệp app.jsx của tôi có mã sau.

import React from "react"; 
import ReactDOM from "react-dom"; 
import {Router, browserHistory} from "react-router"; 
import Hello from "./components/Hello"; 



const routes = [{ 
    path:"/", 
    getComponents(location, callback) { 
     require.ensure([], function (require) { 
      callback(null, require('./components/Hello')) 
     }) 
    } 
}]; 


ReactDOM.render(
    <Router history={browserHistory} routes={routes}/>, 
    document.getElementById("container") 
); 

Hello.jsx thành phần có đoạn mã sau

import React from "react"; 
export default class Hello extends React.Component { 

    render() { 

     return (
      <h2>Hello World</h2> 
     ) 
    } 
} 

Answer 1

Lỗi này xảy ra vì webpack không hỗ trợ module es6

nếu bạn đang sử dụng babel để transpile đang es6 sau đó sử dụng từ khóa mặc định như

require('./components/Hello').default 

do đó các tuyến đường sẽ là

const routes = [{ 
    path:"/", 
    getComponents(location, callback) { 
     require.ensure([], function (require) { 
      callback(null, require('./components/Hello').default) 
     }) 
    } 
}];