diff --git a/packages/router/README.md b/packages/router/README.md index 80e26cd3285f..180b1cc365fd 100644 --- a/packages/router/README.md +++ b/packages/router/README.md @@ -6,10 +6,6 @@ This is the built-in router for Redwood apps. It takes inspiration from Ruby on Redwood Router (RR from now on) is designed to list all routes in a single file, without any nesting. We prefer this design, as it makes it very easy to track which routes map to which pages. -## Installation - -RR was designed for use in Redwood apps, and if you use `yarn create-redwood-app` it will be installed for you. The rest of the documentation here will use examples that are appropriate in that context. That said, you can use RR outside of Redwood apps too! To learn more, see [Installation and use outside of a Redwood app](#installation-and-use-outside-of-a-redwood-app) at the end of this document. - ## Router and Route The first thing you need is a `Router`. It will contain all of your routes. RR will attempt to match the current URL to each route in turn, stopping when it finds a match, and rendering that route only. The only exception to this is the `notfound` route, which can be placed anywhere in the list and only matches when no other routes do. @@ -274,7 +270,7 @@ const SomePage = () => { ## Code-splitting -By default, RR (when used in a Redwood app) will code-split on every Page, creating a separate lazy-loaded webpack bundle for each. When navigating from page to page, RR will wait until the new Page module is loaded before re-rendering, thus preventing the "white-flash" effect. +By default, RR will code-split on every Page, creating a separate lazy-loaded webpack bundle for each. When navigating from page to page, RR will wait until the new Page module is loaded before re-rendering, thus preventing the "white-flash" effect. ## Not code splitting @@ -321,40 +317,3 @@ After adding this to your app you will probably not see it when navigating betwe ``` Now the loader will show up after 500ms of load time. To see your loading indicator, you can set this value to 0 or, even better, [change the network speed](https://developers.google.com/web/tools/chrome-devtools/network#throttle) in developer tools to "Slow 3G" or another agonizingly slow connection speed. - -## Installation and use outside of a Redwood app - -If you'd like to use RR in a non-Redwood app, you can! Start by installing it: - -```terminal -$ yarn add @redwoodjs/router -``` - -Then you can import and use the various RR components like normal. The only exception being that Redwood automatically takes care of making all your Pages available in the `Routes.js` file. When using RR outside that context, you'll need to do this on your own. By default, RR provides code splitting for every Page. To mimic this, you'll need to define each Page as an object, like so: - -```js -const HomePage = { - name: 'HomePage', - loader: () => import('path/to/HomePage.js'), -} - -... - - - - -``` - -Then RR will take care of the lazy loading for you. If you'd prefer to have some or all of your Pages included in the main webpack bundle, you can import them normally: - -```js -import HomePage from 'path/to/HomePage.js' - -... - - - - -``` - -That's it! Everything else should work the same as it does inside a Redwood app!