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

Question

Compiling my packages with webpack (there is a separate vendor.js and then an app.js, vendor.js just requires some basics like react, etc). I'm wondering why when I use {...renderProps} format in the Router declaration, that it throws this error. If I change {...renderProps} to the standard routes={routes} format, it seems to work, but everyone tends to use {...renderProps}, and I'm trying to figure out why it isn't working for me. I believe the dot alias {...x} is a stage-0 feature, so I have stage-0 defined in my webpack presets, but doesn't seem to affect the outcome. Here's my files:

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 is:

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 }
  ] 
}

This seems to be exported correctly and being imported correctly into app.js, as console.log shows the object as expected.

But for some reason upon page load, the browser gives:

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

This error is being displayed from the dll.vendor.js file (not app.js), but I'm not sure that matters as I react is loaded into the vendors file, and react is responsible for showing the errors.

Anyone have an idea as to why?

Answer 1

Does changing the match in app.js from <Router> to <RouterContext> and deleting the history prop fix it?

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

That's what is recommended in react-router's docs

Answer 2

React router 2

It is because the Router component does not take routes as a prop.

As this is for server-side rendering, the code need to use RouterContext rather than Router .

React router 4

match and Router has been removed to make life simpler and been replaced with MemoryRouter , BrowserRouter and 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;

for a working demo take a look at react-lego

Answer 3

ah, ok - the confusion was around the use of reactRouter.match and RouterContext both of which I believe are for server-side rendering only.

You should have a Router , which takes children and a history (browser or memory).

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