https://github.com/palmerhq/router-suspense

The suspense-friendly minimalistic sister of React Router 4.
https://github.com/palmerhq/router-suspense

react react-router react-suspense suspense

Last synced: 7 days ago
JSON representation

The suspense-friendly minimalistic sister of React Router 4.

• Host: GitHub
• URL: https://github.com/palmerhq/router-suspense
• Owner: palmerhq
• License: mit
• Created: 2018-08-09T18:38:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-11T22:15:59.000Z (about 6 years ago)
• Last Synced: 2024-10-05T11:47:40.636Z (about 1 month ago)
• Topics: react, react-router, react-suspense, suspense
• Language: JavaScript
• Size: 123 KB
• Stars: 125
• Watchers: 5
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-list - router-suspense - friendly minimalistic sister of React Router 4. | palmerhq | 127 | (JavaScript)

README

        
# Router Suspense

A suspense-friendly minimalistic sister of React Router.

```

npm i router-suspense

```

As of now, this is a very basic router that works in async-land. 



## Playing with Suspense

This router will work in React 15+. However, If you want to play around with suspense features, you'll need to enable suspense somehow. That means either building React yourself. Or, using this handy dandy starter we made.

https://github.com/palmerhq/react-suspense-starter

## API

The API is basically the core of React Router 4.

### ``

Exactly the same as RR4's ``

- `children: React.ReactNode`

```jsx

import React from 'react';

import { unstable_createRoot as createRoot } from 'react-dom';

import { Router } from 'router-suspense';

import App from './App';

const root = createRoot(document.getElementById('app'));

const render = Comp => {

  root.render(

   

     

   

  );

};

render(App);

```

### ``

Render prop component to conditionally render based on the URL. If present, it uses `ReactDOM.unstable_deferredUpdates` to wait for any suspense jazz to happen on the next route before making the transition. 

#### Route Props

- `render: ((props) => React.ReactNode)`: Passes `history`, `location`, `match` as a render prop. Only renders when `path` matches the current location.

- `path: string` Path to match. Same as RR4.

- `exact: boolean = false` Same as RR4.

```jsx

import React from 'react'

import { Route, Link } from 'router-suspense'

export const Nav = () => (

  

    Home

    Dashboard

  

)

export const App = () => (

  


    

     Home

     Dashboard

     User

    

     
Home
} />

     
Dashboard
} />

     
User {match.params.id} 
} />

  

)

```


### ``

Link works like React Router 4's. You give it a `path`, it renders an ``, but does a client-side transition by calling `history.push(path)` under the hood.


- `to: string` The relative path to link to

```jsx

import React from 'react'

import { Link } from 'router-suspense'

export const Nav = () => (

  

    Home

    Dashboard

  

)

```

### `withRouter(Comp: Component)`

A higher-order component that hooks into Router context. Same as RR4.

```jsx

import React from 'react'

import { Link } from 'router-suspense'

const BackButton = ({ history }) => (

  


     history.goBack()}>Back

  

)


export default withRouter(BackButton)

```

## Inspiration

A lot of this code is taken straight from React Router and React Training's MiniRouter lecture.

## Authors

- Jack Cross ([@crosscompile](https://twitter.com/crosscompile))

- Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer))

Copyright © 2018 The Palmer Group.

---

MIT License