Skip to content

Commit

Permalink
Router Docs - Remove idea of sharing router outside of Redwood (#1900)
Browse files Browse the repository at this point in the history
* Update README.md

* Removed the entire Installation section
  • Loading branch information
andrew-hwahin committed Mar 5, 2021
1 parent 0f4126c commit 624b0d5
Showing 1 changed file with 1 addition and 42 deletions.
43 changes: 1 addition & 42 deletions packages/router/README.md
Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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'),
}

...

<Router>
<Route path="/" page={HomePage} name="home" />
</Router>
```

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'

...

<Router>
<Route path="/" page={HomePage} name="home" />
</Router>
```

That's it! Everything else should work the same as it does inside a Redwood app!

0 comments on commit 624b0d5

Please sign in to comment.