# React Router Published articles for React Router. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## A Reproducible Process for Fixing Bugs DevFeed: [A Reproducible Process for Fixing Bugs]() Original publisher: [Read original article]() Published: 2025-10-21T00:00:00Z Content type: tutorial Language: en Sources: [Dan Abramov]() Topics: [bug](), [React Router](), [React](), [Claude](), [Mocking](), [browser]() Tags: [bug](), [claude](), [how-to](), [mocking](), [react](), [react-router]() ### AI overview The article describes debugging a web app where adding a React Router server call caused scrolling to jitter. It argues that reliable reproductions are essential because Claude and human engineers can propose incorrect fixes without a reproducible test. ### Source excerpt The joys of vibecoding. ## @apollo/client-integration-nextjs Officially Released DevFeed: [@apollo/client-integration-nextjs Officially Released]() Original publisher: [Read original article]() Author: Lenz Weber-Tronic Published: 2025-04-07T11:26:16Z Content type: release Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [Next.js](), [React](), [Server-side rendering](), [Streaming](), [React Router]() Tags: [apollo](), [apollo-client](), [next-js](), [nextjs](), [react](), [react-router](), [release](), [ssr](), [streaming]() ### AI overview Apollo Client's Next.js integration has been released as a stable package after testing and community feedback. The release includes a renamed package, multipart response support, query preloading in RSC, cache rehydration, and compatibility with streaming SSR. ### Source excerpt Exciting News: Officially Released! After almost two years of testing, gathering user feedback, and refining our approach, we're thrilled to announce that has been released as a stable package with the new name . This milestone marks a significant achievement for the Apollo Client community 🎉 A Brief History of Apollo Client + Next.js When we first started working on this integration, we were concerned about potential race conditions during hydration with how Next.js works. ## React Trends in 2025 DevFeed: [React Trends in 2025]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-03-18T06:50:46Z Content type: article Language: en Sources: [Robin Wieruch]() Topics: [React](), [Next.js](), [React Router](), [Remote Procedure Call (RPC)]() Tags: [2025](), [next-js](), [react](), [react-router](), [react-trends-2025](), [rpc](), [technical]() ### AI overview An overview of React trends in 2025, focusing on the development and expected adoption of React Server Components and React Server Functions. It explains how server-side execution can reduce client-side JavaScript and describes related changes in Next.js, React Router, and other frameworks. ### Source excerpt React Trends in 2025 which should be on your watchlist. A walkthrough of the state of React ... ## Sunsetting Create React App DevFeed: [Sunsetting Create React App]() Original publisher: [Read original article]() Author: Matt Carroll and Ricky Hanlon Published: 2025-02-14T00:00:00Z Content type: release Language: en Sources: [React Blog]() Topics: [React](), [Framework](), [Vite](), [Tooling](), [Single-page application (SPA)](), [Next.js](), [React Router]() Tags: [frameworks](), [next-js](), [react](), [react-router](), [release](), [upgrade](), [vite]() ### AI overview React is deprecating Create React App for new applications and recommends migrating existing applications to a framework or build tool such as Vite. The article explains the historical role of Create React App, its production limitations, lack of active maintainers, continued maintenance-mode support, and migration options for client-only single-page applications. ### Source excerpt Today, we're deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We're also providing docs for when a framework isn't a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch. ## React Router 7: Search Params (alias Query Params) DevFeed: [React Router 7: Search Params (alias Query Params)]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:54Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [React](), [Query (disambiguation)]() Tags: [how-to](), [react](), [react-router](), [react-router-7](), [react-router-params](), [react-router-query-params](), [react-router-search-params](), [search](), [tutorial]() ### AI overview A tutorial on using Search Params, also called Query Params, with React Router 7. It explains how storing search state in the URL makes filtered lists shareable and introduces the useSearchParams hook as an alternative to React state for this purpose. ### Source excerpt How to: Search Params in React Router 7. A example on Search Params (also called Query Params) with React Router ... ## React Router 7: Descendant Routes DevFeed: [React Router 7: Descendant Routes]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:53Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Tutorial](), [React]() Tags: [react](), [react-router](), [react-router-7](), [react-router-descendant-routes](), [react-router-tutorial](), [tutorial]() ### AI overview A React Router 7 tutorial explaining descendant routes. It shows how an umbrella Users component can render an index route for a user list and a dynamic route for user details, so only the matching view is displayed. ### Source excerpt How to: Descendant Routes in React Router 7. A step by step example on Descendant Routes with React Router ... ## React Router 7: Nested Routes DevFeed: [React Router 7: Nested Routes]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:52Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Tutorial](), [Routing (disambiguation)]() Tags: [how-to](), [react](), [react-router](), [react-router-7](), [react-router-nested-routes](), [react-router-tutorial](), [route](), [router](), [routing]() ### AI overview A step-by-step tutorial on using nested routes with React Router 7. It demonstrates tab-like navigation within a user page, explains index and fallback routes, and shows how to map nested paths to Route components. ### Source excerpt How to: Nested Routes in React Router 7. A step by step example on Nested Routes with React Router ... ## React Router 7 Lazy Loading DevFeed: [React Router 7 Lazy Loading]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:51Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Tutorial](), [React](), [Optimization]() Tags: [code-splitting](), [lazy-loading](), [performance](), [react](), [react-router](), [react-router-7](), [react-router-lazy-loading](), [react-router-tutorial](), [tutorial]() ### AI overview This tutorial explains route-level lazy loading with React Router 7. It shows how splitting an application into smaller bundles can load only the code needed for a visited route, and demonstrates React.lazy, React Suspense, and @loadable/component. ### Source excerpt How to: React Router 7 Lazy Loading: code-splitting at route level helps you lazy-load just the things that are needed by the user, which dramatically improves the performance ... ## React Router 7: Authentication DevFeed: [React Router 7: Authentication]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:50Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Authentication](), [React]() Tags: [authentication](), [how-to](), [react](), [react-router](), [react-router-7](), [react-router-authentication](), [sign-in](), [tutorial]() ### AI overview A tutorial on implementing authentication flows in React Router 7, including sign-in, sign-out, protected routes, redirects, and integration with an authentication API. ### Source excerpt You will learn how to use authentication in React Router 7 by authenticating a user by login (sign in) and logout (sign out) ... ## React Router 7: Example DevFeed: [React Router 7: Example]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:49Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Tutorial](), [Code]() Tags: [code](), [component](), [components](), [layout](), [links](), [react](), [react-router](), [react-router-7](), [react-router-example](), [route](), [router](), [tutorial]() ### AI overview A brief React Router 7 tutorial demonstrates matching routes with links, layout and index routes, no-match fallback handling, and active links. It also points to advanced topics including nested, dynamic, descendant, protected, and authentication routes. ### Source excerpt A brief React Router 7 example to get you started ... ## React Router 7: Redirect DevFeed: [React Router 7: Redirect]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:48Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Tutorial](), [React]() Tags: [how-to](), [react](), [react-router](), [react-router-7](), [react-router-redirect](), [react-router-tutorial](), [route]() ### AI overview A tutorial on implementing redirects in React Router 7. It covers declarative redirects with the Navigate component, programmatic redirects with the useNavigate Hook, route-level alternatives, and server-side redirects for SEO and performance. ### Source excerpt How to: Redirect in React Router 7 by using the declarative Navigate component or the programmatic useNavigate Hook ... ## React Router 7: Private Routes (alias Protected Routes) DevFeed: [React Router 7: Private Routes (alias Protected Routes)]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:47Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Authentication](), [Authorization](), [React]() Tags: [authentication](), [authorization](), [how-to](), [react](), [react-router](), [react-router-7](), [react-router-private-routes](), [react-router-protected-routes](), [route](), [tutorial]() ### AI overview A tutorial on implementing private or protected routes in React Router 7. It demonstrates guarding pages with authentication, permissions, and roles, including redirecting unauthorized users and handling login and logout state. ### Source excerpt How to use Private Routes in React Router 7 (alias Protected Routes) by using conditions (e.g. authentication, permissions, roles) to authorize users for guarded pages ... ## React Router 7 Tutorial DevFeed: [React Router 7 Tutorial]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2025-01-06T05:52:46Z Content type: tutorial Language: en Sources: [Robin Wieruch]() Topics: [React Router](), [Tutorial](), [React](), [Routing (disambiguation)](), [Vite]() Tags: [hooks](), [layout](), [navigation](), [react](), [react-router](), [react-router-7](), [react-router-tutorial](), [routing](), [tutorial](), [vite]() ### AI overview A step-by-step tutorial for building a React application with React Router 7. It covers project setup with Vite, navigation and links, route matching, layout routes, and related routing patterns. ### Source excerpt React Router 7 tutorial: setup, hooks, nested routes, dynamic routes, programmatic navigation, active links, layout routes, index routes and more. A step by step React tutorial for beginners ... ## What's new in Apollo Client 3.9 DevFeed: [What's new in Apollo Client 3.9]() Original publisher: [Read original article]() Author: Alessia Bellisario Published: 2024-01-31T12:27:45Z Content type: release Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [React](), [React Router]() Tags: [announcement](), [apollo-client](), [cache](), [improvements](), [new-features](), [performance](), [react](), [react-router](), [release]() ### AI overview Apollo Client 3.9 introduces Suspense-enabled data fetching for user interactions, query preloading outside React, a new hook for accessing query handlers, memory-use optimizations, multipart subscriptions, and network adapters for Relay and urql. Query preloading is described as an alpha feature that may change before version 3.10. ### Source excerpt With the release of Apollo Client 3.9, we're excited to announce a host of new features and improvements, including: - Suspense-enabled data fetching in response to user interaction with - Preloading data outside of React with and - Memory usage optimizations - A new hook for accessing and for a given - Multipart subscriptions network adapters for Relay and urql - improvements Let's dive in! ## Using Path Matching in React Router DevFeed: [Using Path Matching in React Router]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2022-12-05T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React Router](), [React]() Tags: [code](), [react](), [react-router](), [router](), [writing]() ### AI overview This article explores using path matching in React Router to map route patterns to page titles, while noting that passing titles directly through a route wrapper can be a simpler solution. The examples use React Router v5. ### Source excerpt Recently on a project I was working on I noticed every page was importing in order to display the unique page title, like this: For an app... ## Mixing It Up: Remix Joins Shopify to Push the Web Forward DevFeed: [Mixing It Up: Remix Joins Shopify to Push the Web Forward]() Original publisher: [Read original article]() Author: Dion Almaer Published: 2022-10-31T14:00:02Z Content type: news Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Remix](), [Shopify](), [React Router](), [React](), [Web](), [Front end](), [Single-page application (SPA)](), [Back end](), [Open Source]() Tags: [backend](), [compatibility](), [developer-experience](), [framework](), [front-end](), [javascript](), [open-source](), [react](), [react-router](), [remix](), [shopify](), [web](), [web-platform]() ### AI overview Shopify announces that the open-source Remix web framework and its team are joining the company. The partnership aims to advance fast, resilient web experiences, improve Shopify's Hydrogen product, and provide Remix with stronger sponsorship and support. ### Source excerpt At Shopify, the Remix open-source community has a strong sponsor and supporter that will enable the web framework to accelerate its roadmap. ## How to Structure and Organize a React Application DevFeed: [How to Structure and Organize a React Application]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-06-23T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React](), [structure](), [React Hooks](), [Redux](), [React Router](), [styled-components](), [Jest](), [testing-library](), [Authentication]() Tags: [authentication](), [css](), [how-to](), [javascript](), [jest](), [react](), [react-hooks](), [react-router](), [redux](), [state-management](), [structure]() ### AI overview This tutorial presents an opinionated, feature-focused directory structure for organizing large-scale production React applications. It explains how to separate global shared components from feature-specific code and discusses accompanying choices for Redux, React Router, styling, testing, and authentication. ### Source excerpt There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the... ## React Router v4 redirect decorator DevFeed: [React Router v4 redirect decorator]() Original publisher: [Read original article]() Author: Stanko Published: 2018-01-29T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React Router](), [React Component](), [Code]() Tags: [code](), [component](), [export](), [import](), [react](), [react-component](), [react-router](), [return](), [router](), [routing]() ### AI overview This tutorial explains how React Router v4 handles redirects through rendered components and presents a higher-order decorator that exposes a redirectTo method. The decorator can either replace the current URL or push a new history entry. ### Source excerpt React Router switched to component based routing starting with the version 4. Redirects are now done by rendering a Redirect component, like this:Please note that you can use included withRouter decorator but it can cause update blocking and introduce side effects. This is small subset of it. What I usually do is to keep redirectTo property in component's state. To redirect, I set it to the URL I want to redirect to, and render Redirect at the start of the render method: render() { const { redirectTo } = this.state; if (redirectTo) { return ; } return ( ); } This approach works well, but I got tired of repeating the same code over and over again. So I pulled the functionality to a decorator (higher order component if you prefer). Redirect decorator # I did exactly what I described above, and exposed redirectTo method to a composed component. import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; const withRedirect = ComposedComponent => class RedirectDecorator extends Component { state = { push: false, redirectUrl: null, } componentDidUpdate(prevProps, prevState) { const { redirectUrl, } = this.state; // If component is rendered on redirect page as well // (i.e. header or footer) it would cause redirect-loop // as "" is being rendered every time. // So we are resetting the state after redirect if (!prevState.redirectUrl && redirectUrl) { this.setState({ push: false, redirectUrl: null, }); } } redirectTo = (redirectUrl, push = false) => { this.setState({ push, redirectUrl, }); } render() { const { push, redirectUrl, } = this.state; if (redirectUrl) { return ; } return ( ); } }; export default withRedirect; Usage # Import newly added decorator and apply it to your component. It will inject redirectTo to it's props, and ## Tutorial: GraphQL Input Types and Custom Resolvers DevFeed: [Tutorial: GraphQL Input Types and Custom Resolvers]() Original publisher: [Read original article]() Author: Evans Hauser Published: 2017-06-06T00:15:00Z Content type: tutorial Language: en Sources: [Apollo Blog]() Topics: [GraphQL](), [Tutorial](), [React](), [Messaging]() Tags: [apollo](), [graphql](), [latency](), [messaging](), [mutation](), [react-router](), [react-router-tutorial](), [resolvers](), [routing](), [schema](), [server](), [state](), [tutorial](), [types]() ### AI overview Part 5 of a full-stack GraphQL and React tutorial explains how to build a channel detail view for a messaging application. It covers field arguments in queries, Apollo's normalized cache, GraphQL input types, custom resolvers, and mutations for posting messages. ### Source excerpt This is part 5 of our full-stack GraphQL + React Tutorial that guides you through creating a messaging application. Each part is self-contained and introduces new key concepts, which means you don't have to do all the other parts before doing this one. ## The Diverse React Navigation Ecosystem DevFeed: [The Diverse React Navigation Ecosystem]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2017-03-06T17:00:00Z Content type: article Language: en Sources: [ReactJS News]() Topics: [React](), [React Native](), [Routing (disambiguation)](), [React Router](), [Redux]() Tags: [code](), [community](), [deprecated](), [native](), [react](), [react-native](), [react-router](), [redux](), [router](), [routing]() ### AI overview The article compares navigation in React and React Native. It presents React Router as a well-supported incumbent, while describing React Native navigation as rapidly changing, with several official navigators and community projects addressing common patterns such as sidebars, tab bars, and headers. ### Source excerpt The routing ecosystem around React and React Native is quite different. One is characterized by a strong incumbent, and the other is plagued by rapid change. React JS No question about it, React Router (ReactTraining/react-router) is king here. They have the benefit of several years of active development, along with an active community submitting PR's, fixes, etc. Supplement that with myriad tutorials and how-to's and you end up with a well-supported, stable product. To be fair, React Router has suffered some major API upsets, and is nearly the poster-child for javascript fatigue but the maintainers have declared their lasting support for a few specific versions, which means you can plop down with V3 and be good to go for the next 12 to 24 months. React Native Ok, this is where things start to get really, really crazy. The most important thing to keep in mind is that the React Native team has produced three navigation helpers: NavigatorIOS, Navigator, and NavigatorExperimental. NavigatorIOS was quickly deprecated, as it was supported only by (you guessed it) IOS. Navigator is the currently endorsed solution for navigation, at least if you are following the official docs. However, its about to be upset by- NavigationExperimental. This is an updated navigator that has learned some lessons from Navigator, and has some solid integration with Redux. 'Navigator' is (or was!) sleighted to be deprecated in favor of NavigationExperimental at some point. Already you have three 'official' navigators supported by the React Native team. The big issue with all three of these is that they are somewhat lightweight and don't include a lot of common navigation situations out of the box, like sidebars, tab bars, headers, etc. To solve that, the community has introduced... React Native Router Flux (aksonov/react-native-router-flux). My personal favorite, this is router is based upon NavigationExperimental. You can imagine that the authors looked at NavigationExperimental, realized that e ## Deploying React (Router) app to the subfolder on server DevFeed: [Deploying React (Router) app to the subfolder on server]() Original publisher: [Read original article]() Author: Stanko Published: 2017-01-18T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [React Router](), [React](), [web applications](), [implementation](), [browser](), [configuration]() Tags: [browser](), [configuration](), [htaccess](), [implementation](), [react](), [react-router](), [server](), [webpack]() ### AI overview A tutorial on deploying a React Router application in a server subfolder. It presents HashRouter for simpler deployments, BrowserRouter with a basename for preserving browser history, and server fallback configuration for routes that would otherwise return 404 errors. ### Source excerpt May 2018 - Updated to match React Router v4 API. September 2019 - Updated to match React Router v5 API, added React Create App part. If you ever had to deploy React Router app to the subfolder on the server, you know what the problem is. Routes will get messed up once you upload it to the server. Here are two solutions I use in these cases. Easy way, just use HashRouter # The easiest way to achieve this is to use HashRouter instead of BrowserRouter. import { HashRouter, Route } from 'react-router-dom'; // Then in render {/*...*/} This is the best approach if your subfolder name changes (for example, if folder name is a build version). But you'll have /#/ included in the every URL. If this bothers you, check the second solution. Example of the routes http://yourserver.com/path/to/subfolder/ http://yourserver.com/path/to/subfolder/#/about http://yourserver.com/path/to/subfolder/#/search Hard way, setting base path by hand # If you want to keep browser history implementation, you'll need to change few things. First, we need to update our routes to include full absolute path to the subfolder. Using React Router's basename # As Davis Cabral pointed out in the comments, instead of manually adding publicPath to all routes, it can be achieved by using React Router's basename prop. import { BrowserRouter, Route } from 'react-router-dom'; // Then in render {/*...*/} Doing it by the hand # I define my routes something like this: const publicPath = '/path/to/subfolder/'; export const routeCodes = { HOME: publicPath, SEARCH: `${ publicPath }search`, ABOUT: `${ publicPath }about`, }; // Then you can use them like this // Setting up .htaccess fil ## React and Redux, Webpack 2 boilerplate DevFeed: [React and Redux, Webpack 2 boilerplate]() Original publisher: [Read original article]() Author: Stanko Published: 2016-11-24T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [Boilerplate](), [React](), [Webpack](), [Redux](), [Babel](), [React Router](), [Sass](), [file](), [npm]() Tags: [babel](), [boilerplate](), [dev-tools](), [development](), [npm](), [react](), [react-router](), [redux](), [sass](), [webpack]() ### AI overview The article introduces a minimal React application boilerplate built with Redux and Webpack 2. It explains that the author extracted the boilerplate from a pet project after finding Webpack 1.x difficult to configure, and lists implemented, planned, and possible future features. ### Source excerpt Currently, I'm working on a relatively small pet project. While setting it up, I decided to extract a webpack boilerplate from it. As whole JS community is moving really fast, I found very hard to set everything up using Webpack 1.x. One package would ask to update the other, that would break the third one, then that one... and so on. Luckily, I was able to set everything up using Webpack 2. It is still in beta, but I had no problems so far. You can find the boilerplate on GitHub. Implemented Features # React React router Redux Redux Thunk Immutable reducer data Webpack 2 (development and production config) Hot Module Replacement Babel - static props, decorators SASS with autoprefixing Webpack dashboard Linting Included es6-promise and isomorphic-fetch File imports relative to the app root Planned features # Redux Dev Tools Generating icon font from SVGs Preview production build Git hooks - lint before commit (or push) Future features # Universal may be added at some point. Universal rendering Server async data About # This boilerplate is a complete, but minimal React application. It includes reducers (redux), actions (sync and async), routing, SASS... My goal was to be ready immediately after cloning the repo (and running npm i). My plan is to reuse this as much as possible. It will updated so make sure you follow the documentation on GitHub. ## Routing in React Native with Jake Murzy DevFeed: [Routing in React Native with Jake Murzy]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-09-28T17:00:00Z Content type: opinion Language: en Sources: [ReactJS News]() Topics: [React Native](), [Routing (disambiguation)](), [React Router](), [React](), [Library](), [Open Source]() Tags: [js](), [library](), [open-source](), [react](), [react-native](), [react-router](), [routing]() ### AI overview An interview with Jake Murzy about a new React Native navigation library created to provide a routing approach similar to React Router. The article describes React Native's unsettled routing ecosystem and the author's frustration with existing solutions, including deprecated, unstable, incomplete, or low-level options. ### Source excerpt Jake Murzy has been hard at work creating a new navigational library for React Native over the last couple of months. While React JS has the benefit of the highly-regarded React Router, such a comprehensive routing solution doesn't exist yet in the React Native community. In fact, React Native's routing landscape has been in constant upheaval for the last year. The library itself has official three 'navigators' for handling decision making on which components to show the user, including 'NavigatorIOS', 'Navigator', and - more recently - 'NavigatorExperimental'. The open source community likewise has the packages 'React Native Router Flux', 'React Native Router Native', and 'React Native Redux Router', which of which are in various states of completion, or, more commonly, disrepair. Jake Murzy has been hard at work creating a new navigational library for React Native over the last couple of months. While React JS has the benefit of the highly-regarded React Router, such a comprehensive routing solution doesn't exist yet in the React Native community. In fact, React Native's routing landscape has been in constant upheaval for the last year. The library itself has official three 'navigators' for handling decision making on which components to show the user, including 'NavigatorIOS', 'Navigator', and - more recently - 'NavigatorExperimental'. The open source community likewise has the packages 'React Native Router Flux', 'React Native Router Native', and 'React Native Redux Router', which of which are in various states of completion, or, more commonly, disrepair. React Router Native appears to focus on matching the API of the immensely popular React Router package, even going as far as introducing the concept of a URL into React Native, which bucks the notion that only web applications need or deserve a URL. Today Jake is going to share some of his thoughts about his new library. Q: Hi Jake! The React Native library contains several navigation solutions and the surround ## React Router & Webpack in Production DevFeed: [React Router & Webpack in Production]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2016-03-13T04:00:09Z Content type: article Language: en Sources: [ReactJS News]() Topics: [React Router](), [Webpack](), [Development](), [Code](), [API]() Tags: [api](), [code-splitting](), [polyfill](), [react](), [react-router](), [webpack]() ### AI overview A practical account of using React Router and Webpack in production for a large application with many routes and code splits. It explains the client-side setup, route organization, asynchronous data loading, server rendering, and differences between server and client builds. ### Source excerpt I've been working on a pretty large react-router codebase at work. Currently it has around 50~ code splits, which as you can imagine, is a lot of routes. This is going to be a post on the things I've learned throughout building out my development / production config and how we are using webpack in production. ###Initial Setup Before I really dive into how my webpack config is setup and the problems I've found, I'll quickly go over how this app is setup. Currently, there's one entry point and it looks like this: import React from 'react' import { render } from 'react-dom' import { match, Router, browserHistory } from 'react-router' import AsyncProps from 'async-props' import routes from '../routes/index' /* globals document, window */ const { pathname, search, hash } = window.location const location = `${pathname}${search}${hash}` match({ routes, location }, () => { render( } routes={routes} history={browserHistory} />, document.getElementById('app') ) }) It looks like a standard react-router setup, except a couple things are different. For one, there's way too many routes to have them all in this file, so we are importing the main route object into this file. Second, we are using match on the client side. Without matching first, the client side would try to render before the splits were downloaded causing an error. You can read a little more about match on the client here. Next, we are using Ryan Florence's awesome async-props library for loading data into components. It allows me to load data from an api before the server renders components. It will pass the data down to the client for the client-side render, and then data will load as you navigate to new pages automatically. ###Routes Our main routes file looks like this: export default { component: 'div', path: '/', indexRoute: require('./index'), childRoutes: [ require('./login'), require('./account'), ... ] } There's a lot more require's in our app of course. And