React.js 客户端路由匹配给出“提供给 `Router` 的无效 prop `routes`。”

Question

用 webpack 编译我的包（有一个单独的 vendor.js，然后是一个 app.js，vendor.js 只需要一些基础知识，比如 react 等）。我想知道为什么当我在 Router 声明中使用 {...renderProps} 格式时，它会引发此错误。如果我将 {...renderProps} 更改为标准 routes={routes} 格式，它似乎可以工作，但每个人都倾向于使用 {...renderProps}，我试图找出它为什么不起作用为了我。我相信点别名 {...x} 是一个阶段 0 功能，所以我在我的 webpack 预设中定义了阶段 0，但似乎不会影响结果。这是我的文件：

app.js：

import React from 'react';
import { render } from 'react-dom';
import { match, Router, RouterContext, browserHistory } from 'react-router'
import { createHistory } from 'history'
import routes from './components/routes/AppRoute.jsx';

const { pathname, search, hash } = window.location;
const location = pathname;

match({ routes, location }, (error, redirectLocation, renderProps) => {
   render(
        <Router 
            {...renderProps} 
            history={browserHistory} 
        />, 
        document.getElementById('react-app')
    );
})

/components/routes/AppRoute.jsx 是：

import AppShell from '../AppShell.jsx';
import Index from '../Index.jsx';

if(typeof require.ensure !== "function") require.ensure = function(d, c) { c(require) }

module.exports = {
  path: '/',
  component: AppShell,
  indexRoute: Index,
  childRoutes: [
    { path: 'test', 
        getComponent(location, cb) {
            require.ensure([], (require) => {
              cb(null, require('../Test.jsx'))
            })
          }
    },
    { path: 'user', 
        getComponent(location, cb) {
            require.ensure([], (require) => {
              cb(null, require('../User.jsx'))
            })
          }
    },
    { path: '*', 
        getComponent(location, cb) {
            require.ensure([], (require) => {
              cb(null, require('../NotFound.jsx'))
            })
          }
    },
    { path: 'app-shell', component: AppShell }
  ] 
}

这似乎已正确导出并正确导入到 app.js 中，因为 console.log 显示了预期的对象。

但由于某些原因在页面加载时，浏览器给出：

dll.vendor.js:330 Warning: Failed prop type: Invalid prop `routes` supplied to `Router`.
    in Router

这个错误是从 dll.vendor.js 文件（不是 app.js）中显示出来的，但我不确定这是否重要，因为我的 react 已加载到供应商文件中，并且 react 负责显示错误。

有人知道为什么吗？

Answer 1

将app.js 中的match 从<Router> 更改为<RouterContext> 并删除历史道具是否可以解决问题？

match({ routes, location }, (error, redirectLocation, renderProps) => {
   render(
        <RouterContext 
            {...renderProps} 
        />, 
        document.getElementById('react-app')
    );
})

这就是react-router's docs推荐的内容

Answer 2

反应路由器 2

这是因为Router 组件没有将routes 作为prop。

由于这是服务端渲染，代码需要使用RouterContext而不是Router。

反应路由器 4

match 和 Router 已被删除以简化生活，并已替换为 MemoryRouter、BrowserRouter 和 ServerRouter。

/* eslint-disable no-param-reassign */
import React from 'react';
import { renderToString } from 'react-dom/server';
import { ServerRouter/* , createServerRenderContext */ } from 'react-router';
// todo : remove line when this PR is live
// https://github.com/ReactTraining/react-router/pull/3820
import createServerRenderContext from 'react-router/createServerRenderContext';
import { makeRoutes } from '../../app/routes';

const createMarkup = (req, context) => renderToString(
  <ServerRouter location={req.url} context={context} >
    {makeRoutes()}
  </ServerRouter>
);

const setRouterContext = (req, res, next) => {
  const context = createServerRenderContext();
  const markup = createMarkup(req, context);
  const result = context.getResult();
  if (result.redirect) {
    res.redirect(301, result.redirect.pathname + result.redirect.search);
  } else {
    res.status(result.missed ? 404 : 200);
    res.routerContext = (result.missed) ? createMarkup(req, context) : markup;
    next();
  }
};

export default setRouterContext;

如需工作演示，请查看react-lego

Answer 3

啊，好吧 - 混淆是围绕reactRouter.match 和 RouterContext 的使用，我认为这两者都仅用于服务器端渲染。

你应该有一个Router，它需要孩子和历史（浏览器或内存）。

ReactDOM.render(
    <Router history={history} >
        <Route path="/" component={ MainLayout }>
          <IndexRoute { ...indexRoute(routes.homepage) } />
          <Route { ...routes.game } />
          <Route { ...routes.notFound } />
        </Route>
    </Router>,
document.getElementById('html'));