将 v15.4 反应到 v16 迁移问题

Question

我正在尝试迁移我的整个项目，但在main.jsx文件中遇到了这个问题。

• "反应路由器"："3.0.x"
• "材料-UI"： "^0.19.4"
• "react-redux"： "4.4.8"

对象作为 React 子对象无效（找到：带键的对象 {默认}）。如果要呈现子项的集合，请使用 数组代替。 在路由器中（在main.jsx：68） in MuiThemeProvider （at main.jsx：67） 在提供程序中（在main.jsx：66）

代码：

ReactDOM.render(
    <Provider store={store}>
        <MuiThemeProvider muiTheme={getMuiTheme(MyRawTheme)}>
            <Router
                history={history}
                routes={routes}
                render={applyRouterMiddleware(useScroll())}
            />
        </MuiThemeProvider>
    </Provider>, document.getElementById('main-app')
);

这是怎么回事？

Answer 1

看起来 React

Router v3.0.x 不支持 React 16。尝试升级到 React Router v3.2.x，尽管我推荐 React Router v4。有关详细信息，请参阅此线程。

看起来您正在导出对象而不是class。与其const routes React 元素，不如创建一个Routes组件（函数或类），并将所有路由放在其 render（） 中。
例如：

const Routes = () => (
  <Route>
  .
  .
  .
  </Route>
)

在主文件中：

<MuiThemeProvider muiTheme={getMuiTheme(MyRawTheme)}>
  <Router
    history={history}
    render={applyRouterMiddleware(useScroll())}>
      {routes}
  </Router>
</MuiThemeProvider>

Answer 2

我终于成功地修复了所有问题。

代码在任何地方（甚至在路由中）都使用require，所以我不得不将所有这些需求更改为import或require('path').default;因为新的webpack创建了一个对象，该对象在键"default"中具有实际所需的文件。