diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 0a28db2b..34705108 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -11,7 +11,6 @@ * **Router** - [Configuration](/router/configuration.md) - - [Selection](/router/selection.md) - [State](/router/state.md) - [SSR](/router/ssr.md) diff --git a/docs/api/components.md b/docs/api/components.md index d4e601e2..34327d1b 100644 --- a/docs/api/components.md +++ b/docs/api/components.md @@ -29,43 +29,16 @@ import { appRoutes } from './routing'; ### Router props -| prop | type | description | -| ----------------- | ------------------------- | -------------------------------------------------------------------------------------------------- | -| `routes` | `Routes[]` | Your application's routes | -| `initialRoute` | `Route` | The route your application is initially showing | -| `history` | `History` | The history instance for the router | -| `basePath` | `string` | Base path string that will get prepended to all route paths | -| `resourceContext` | `ResourceContext` | Custom contextual data that will be provided to all your resources' `getKey` and `getData` methods | -| `resourceData` | `ResourceData` | Pre-resolved resource data. When provided, the router will not request resources on mount | -| `onPrefetch` | `function(RouterContext)` | Called when prefetch is triggered from a Link | - -## StaticRouter - -If you are planning to render your application on the server, you must use the `StaticRouter` in your server side entry. The `StaticRouter` should only be used on server as it omits all browser-only resources. It does not require a `history` prop to be provided, instead, you simply need to provide the current `location` as a string. In order to achieve this, we recommend your server side application uses [`jsdom`](https://github.com/jsdom/jsdom). - -```js -// server-app.js -import { StaticRouter } from 'react-resource-router'; -import { App } from '../components'; -import { appRoutes } from '../routing'; - -const { pathname, search } = window.location; -const location = `${pathname}${search}`; - -export const ServerApp = () => ( - - - -); -``` - -### StaticRouter props - -| prop | type | description | -| ---------- | ---------- | ----------------------------------------------------------- | -| `routes` | `Routes[]` | Your application's routes | -| `location` | `string` | The string representation of the app's current location | -| `basePath` | `string` | Base path string that will get prepended to all route paths | +| prop | type | description | +| ----------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | +| `routes` | `Routes[]` | Your application's routes | +| `history` | `History` | The history instance for the router, if omitted memory history will be used (optional but recommended) | +| `location` | `string` | If `history` prop is omitted, this configures the initial location for the default memory history (optional, useful for tests and storybooks) | +| `basePath` | `string` | Base path string that will get prepended to all route paths (optional) | +| `initialRoute` | `Route` | The route your application is initially showing, it's a performance optimisation to avoid route matching cost on initial render(optional) | +| `resourceContext` | `ResourceContext` | Custom contextual data that will be provided to all your resources' `getKey` and `getData` methods (optional) | +| `resourceData` | `ResourceData` | Pre-resolved resource data. When provided, the router will not request resources on mount (optional) | +| `onPrefetch` | `function(RouterContext)` | Called when prefetch is triggered from a Link (optional) | ## MemoryRouter @@ -73,28 +46,7 @@ The `MemoryRouter` component can be used for your application's unit tests. ```js it('should send right props after render with routes', () => { - mount( - - - {({ history, location, routes, route, match, query }) => { - expect(history).toEqual(mockHistory); - expect(location).toEqual(mockLocation); - expect(routes).toEqual(routes); - expect(route).toEqual( - expect.objectContaining({ - path: `/pathname`, - }) - ); - expect(match).toBeTruthy(); - expect(query).toEqual({ - foo: 'bar', - }); - - return
I am a subscriber
; - }} - - - ); + render({/* ... */}); }); ``` @@ -102,9 +54,9 @@ it('should send right props after render with routes', () => { | prop | type | description | | ---------- | ---------- | ----------------------------------------------------------- | -| `routes` | `Routes[]` | Your application's routes | -| `location` | `string` | The string representation of the app's current location | | `basePath` | `string` | Base path string that will get prepended to all route paths | +| `location` | `string` | The string representation of the app's current location | +| `routes` | `Routes[]` | Your application's routes | ## Link component diff --git a/docs/router/README.md b/docs/router/README.md index 1df7d24f..7809f9d1 100644 --- a/docs/router/README.md +++ b/docs/router/README.md @@ -1,6 +1,5 @@ - **Router** - [Configuration](./configuration.md) - - [Selection](./selection.md) - [State](./state.md) - [SSR](./ssr.md) diff --git a/docs/router/selection.md b/docs/router/selection.md deleted file mode 100644 index f034e806..00000000 --- a/docs/router/selection.md +++ /dev/null @@ -1,3 +0,0 @@ -# Which Router should I use? - -React Resource Router provides three kinds of routers which should be quite familiar to anyone who has used `react-router` previously. These are the core [`Router`](../api/components.md#router), the [`StaticRouter`](../api/components.md#staticrouter) for use on the server and the [`MemoryRouter`](../api/components.md#memoryrouter) for use in tests. Please check the [API](../api) docs for more detailed information about these components. diff --git a/docs/router/ssr.md b/docs/router/ssr.md index b1b0f8f9..27c7a6a3 100644 --- a/docs/router/ssr.md +++ b/docs/router/ssr.md @@ -22,22 +22,25 @@ import { RouteComponent } from 'react-resource-router'; export const App = () => ( <> + +