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

To help you get started, we’ve selected a few react-router-config examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pedrobullo / boilerplate-nutella / src / common / lib / DataLoader.js View on Github external
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));
github osamu38 / react-ssr-starter / src / server.js View on Github external
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 = (
github michaelBenin / react-ssr-spa / src / client / index.js View on Github external
// 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
github dotnetcore / WTM / demo / WalkingTec.Mvvm.ApiDemo / ClientApp / src / app / index.js View on Github external
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 () {
github art-software / art-core / packages / art-demo-ssr / client / product / view / IndexSSR.tsx View on Github external
public render() {
    const { url } = (this.props as any).data;
    console.log('url: ', url);
    const routeConfig = convertCustomRouteConfig(routes);
    console.log('routeConfig: ', routeConfig);
    return (
      
        {
          renderRoutes(routeConfig)
        }
      
    );
  }
}
github Wscats / react-tutorial / react+webpack / app / main.js View on Github external
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'))
github alexolefirenko / react-admin-ui / react-admin-ui / src / components / Layout.jsx View on Github external
render() {
        return (
            
                <header>
                
                
                
                    
                        {renderRoutes(this.props.route.routes)}
                    
                
                
                
            
        )
    }
}</header>
github kimkwanka / niru / client / components / App / App.jsx View on Github external
export const App = () =&gt; (
  <div>
    
    <header>
    <main>
      {renderRoutes(routes)}
    </main>
    <footer>
  </footer></header></div>
);
github timberio / gitdocs / src / bundler / static.js View on Github external
export async function renderTree (props) {
  const app = (
    
      
        {renderRoutes(props.tree)}
      
    
  )

  return {
    rendered: renderToString(app),
    helmet: helmet.renderStatic(),
  }
}
github bs32g1038 / node-blog / admin / src / layouts / PageView.js View on Github external
render() {
        const {
            route: { routes },
        } = this.props;

        return renderRoutes(routes);
    }
}

react-router-config

Static route config matching for React Router

MIT
Latest version published 4 years ago

Package Health Score

74 / 100
Full package analysis