router-suspense

by palmerhq

palmerhq /router-suspense

The suspense-friendly minimalistic sister of React Router 4.

130 Stars 3 Forks Last release: Not found MIT License 29 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
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.
import React from 'react'
import { Route, Link } from 'router-suspense'

export const Nav = () => (

)

export const App = () => (

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
import React from 'react'
import { Link } from 'router-suspense'

export const Nav = () => (

)

withRouter(Comp: Component)

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

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

Copyright © 2018 The Palmer Group.


MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.