How to use the react-router-config.matchRoutes function in react-router-config

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 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 Alexloof / Soundize / server.js View on Github external
app.get('*', (req, res) => {
  const store = createStore(req)

  const promises = matchRoutes(Routes, req.path)
    .map(({ route }) => {
      return route.loadData ? route.loadData(store) : null
    })
    .map(promise => {
      if (promise) {
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve)
        })
      }
    })

  Promise.all(promises).then(() => {
    const context = {}
    const content = renderer(req, store, context)
    if (context.url) {
      return res.redirect(301, context.url)
github staylor / graphql-wordpress / packages / react-router-relay-modern / src / prepareData.js View on Github external
export default async ({ routes, environment, url }) => {
  const matches = matchRoutes(routes, url);
  const { createOperationSelector, getOperation } = environment.unstable_internal;
  const subscriptions = matches.reduce((memo, match) => {
    const { query = null, variables = {}, cacheConfig = {} } = match.route;
    if (query) {
      memo.push(
        new QuerySubscription(
          environment,
          createOperationSelector(getOperation(query), variables),
          cacheConfig
        )
      );
    }
    return memo;
  }, []);
  const fetches = await Promise.all(subscriptions.map(subscription => subscription.fetch()));
  const earlyData = await Promise.all(fetches.map(checkResolved));
github ManifoldScholar / manifold / client / src / containers / reader / Reader.js View on Github external
shouldRedirect(props) {
    const matches = matchRoutes(
      props.route.routes,
      this.props.location.pathname
    );
    return matches.length === 0;
  }
github palessit / chyk / src / chyk.tsx View on Github external
async loadAndRender(disableDataLoading: boolean) {
    if (!this.history) {
      throw "No history"
    }
    if (!disableDataLoading) {
      await this.loadData(this.history.location)
    } else {
      const matches = matchRoutes(this.routes, this.history.location.pathname)
      await loadBranchComponents(matches)
    }
    chykHydrateOrRender(this)
  }
github antonybudianto / react-ssr-starter / src / routes / index.js View on Github external
export const getInitialData = (req, store) => {
  const path = req.path
  const ua = new UAParser(req.headers['user-agent']).getResult()
  store.dispatch(initUserAgent(ua))
  return matchRoutes(routes, path).map(({ route }) => {
    const promises = []
    if (route.loadData) {
      promises.push(route.loadData(store, req))
    }
    return Promise.all(promises)
  })
}
github mozilla / delivery-console / src / state / router / selectors.js View on Github external
function getRouteMatchByPathname(pathname) {
  const route = matchRoutes(applicationRoutes, pathname)[0];
  return route;
}
github luangjokaj / react-fondue / src / server / render.js View on Github external
export default ({ clientStats }) => (req, res) => {
	const promises = matchRoutes(routes, req.path).map(({ route }) => {
		route.loadData ? route.loadData(store) : null;
	});

	Promise.all(promises).then(() => {
		const lang = guessLocale(req);
		const context = {};
		const helmetContext = {};

		const app = renderToString(
			
				
					
						
					
				
			,

react-router-config

Static route config matching for React Router

MIT
Latest version published 5 years ago

Package Health Score

80 / 100
Full package analysis