How to use react-router-config - 10 common examples

export const fetchData = (store, location) => {
  const branch = matchRoutes(routes, location);

  const sequence = async (branches) => {
    for (const _branch of branches) {
      const { route, match } = _branch;
      const locationParams = {
        params: match.params,
        query: parseQueryString(location),
      };

      if ((route.component || {}).need) {
        await Promise.all(route.component.need(store, locationParams));
      } else if (route.component.preload) {
        await route.component.preload() // Lazy preload (react-loadable)
          .then(component => {
            if (component.default.need) {
              return Promise.all(component.default.need(store, locationParams));

app.get('*', async (req: $Request, res: $Response) => {
  cookie.connect(req, res);

  const store = configureStore();

  // $FlowFixMe
  loginFromServer(store.dispatch);

  const branch = matchRoutes(routes, req.path);
  const loadedComponents = await loadComponents(branch);
  const branchWithLoadedComponents = getBranchWithLoadedComponents(branch, loadedComponents);
  const loadBranchData = getLoadBranchData(branchWithLoadedComponents, store, req.query);

  Promise.all(loadBranchData)
    .then(async () => {
      const redirectUrls = getRedirectUrls(branchWithLoadedComponents, store, req.query);

      if (redirectUrls.length) {
        res.redirect(redirectUrls[0]);
      } else {
        const helmetContext = {};
        const initialState = store.getState();
        const sheet = new ServerStyleSheet();
        const AppComponent = (

// analytics tracking
  });
 */

  ThirdPartyJs.setThirdPartyGlobals();

  function renderedApp() {
    browserHistory.location.hash = originalHash;
    store.dispatch(initialLoadActionCreator());
    loadAllThirdPartyJs(env);
    document.documentElement.className +=
      document.documentElement.className === '' ? 'hydrated' : ' hydrated';
  }

  // eslint-disable-next-line no-restricted-globals
  const branch = matchRoutes(routes, location.pathname);
  const preloadChunks = branch.reduce(function matchMap(list, { route }) {
    if (route.preloadChunk) {
      list.push(route.preloadChunk);
    }
    return list;
  }, []);

  function hydrateApp() {
    try {
      hydrate(
        ,
        window.document,
        renderedApp
      );
    } catch (err) {
      // fire ad code here to still show ads

RootRoutes.prototype.renderApp = function () {
        if (Store.User.isLogin) {
            console.log("-----------路由列表-----------", lodash.find(this.routes, function (x) { return x.path == "/"; }).routes);
            return React.createElement(LocaleProvider, { locale: zhCN },
                React.createElement(React.Fragment, null, renderRoutes(this.routes)));
        }
        return React.createElement(Login, null);
    };
    RootRoutes.prototype.render = function () {

public render() {
    const { url } = (this.props as any).data;
    console.log('url: ', url);
    const routeConfig = convertCustomRouteConfig(routes);
    console.log('routeConfig: ', routeConfig);
    return (
      
        {
          renderRoutes(routeConfig)
        }
      
    );
  }
}

var React = require('react');
var ReactDom = require('react-dom');
//npm install --save react-router-config
import { matchRoutes, renderRoutes } from 'react-router-config'
import {
	BrowserRouter as Router,
	Route,
	Link
} from 'react-router-dom'


var routes = require("./routes.js");
matchRoutes(routes, '/index');
console.log(routes)
//默认路由
const branch = matchRoutes(routes, '/index')
ReactDom.render((
		
			{renderRoutes(routes)}
		
), document.getElementById('content'))

render() {
        return (
            
                <header>
                
                
                
                    
                        {renderRoutes(this.props.route.routes)}
                    
                
                
                
            
        )
    }
}</header>

export const App = () => (
  <div>
    
    <header>
    <main>
      {renderRoutes(routes)}
    </main>
    <footer>
  </footer></header></div>
);

export async function renderTree (props) {
  const app = (
    
      
        {renderRoutes(props.tree)}
      
    
  )

  return {
    rendered: renderToString(app),
    helmet: helmet.renderStatic(),
  }
}

render() {
        const {
            route: { routes },
        } = this.props;

        return renderRoutes(routes);
    }
}