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.
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
The API is basically the core of React Router 4.
Exactly the same as RR4's <BrowserRouter>
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(
<Router>
<Comp />
</Router>
);
};
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.
render: ((props) => React.ReactNode): Passeshistory,location,matchas a render prop. Only renders whenpathmatches the current location.path: stringPath to match. Same as RR4.exact: boolean = falseSame as RR4.
import React from 'react'
import { Route, Link } from 'router-suspense'
export const Nav = () => (
<nav>
<Link to="/">Home</Link>
<Link to="/dashboard">Dashboard</Link>
</nav>
)
export const App = () => (
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/dashboard">Dashboard</Link>
<Link to="/user/123">User</Link>
</nav>
<Route path="/" exact render={() => <div>Home</div>} />
<Route path="/dashboard" exact render={() => <div>Dashboard</div>} />
<Route path="/user/:id" exact render={({ match }) => <div>User {match.params.id} </div>} />
</div>
)Link works like React Router 4's. You give it a path, it renders an <a>, but does a client-side transition by calling history.push(path) under the hood.
to: stringThe relative path to link to
import React from 'react'
import { Link } from 'router-suspense'
export const Nav = () => (
<nav>
<Link to="/">Home</Link>
<Link to="/dashboard">Dashboard</Link>
</nav>
)A higher-order component that hooks into Router context. Same as RR4.
import React from 'react'
import { Link } from 'router-suspense'
const BackButton = ({ history }) => (
<div>
<button onClick={() => history.goBack()}>Back</button>
</div>
)
export default withRouter(BackButton)A lot of this code is taken straight from React Router and React Training's MiniRouter lecture.
- Jack Cross (@crosscompile)
- Jared Palmer (@jaredpalmer)
Copyright © 2018 The Palmer Group.
MIT License