fusion-plugin-react-router v3.5.8
fusion-plugin-react-router
The fusion-plugin-react-router
package provides a universal router plugin for React.
Installation
yarn add fusion-plugin-react-router
Example
// src/main.js
import App from 'fusion-react';
import Router from 'fusion-plugin-react-router';
import UniversalEvents, {UniversalEventsToken} from 'fusion-plugin-universal-events';
import root from './components/root';
export default function start(App) {
const app = new App(root);
app.register(Router);
app.register(UniversalEventsToken, UniversalEvents);
return app;
}
// src/components/root.js
import React from 'react';
import {Router, Route, Link, Switch, NotFound} from 'fusion-plugin-react-router';
const Home = () => <div>Hello</div>;
const Test = () => <div>Test</div>;
const PageNotFound = () => <NotFound><div>404</div></NotFound>;
const root = (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/test">Test</Link></li>
<li><Link to="/404">404</Link></li>
</ul>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/test" component={Test} />
<Route component={PageNotFound} />
</Switch>
</div>
);
export default root;
API
Dependency registration
import UniversalEvents, {UniversalEventsToken} from 'fusion-plugin-universal-events';
app.register(UniversalEventsToken, UniversalEvents);
Required dependencies
Name | Type | Description |
---|---|---|
UniversalEventsToken | UniversalEvents | An event emitter plugin to emit routing events to, such as the one provided by fusion-plugin-universal-events . |
Router
Configures a router and acts as a React context provider for routing concerns. You don't need to use a Router component if you use getRouter
import {Router} from 'fusion-plugin-react-router';
<Router
location={...}
basename={...}
context={...}
onRoute={...}
>{child}</Router>
location: string
- Required. The current pathname. Should bectx.url
in a Fusion plugin, orreq.url
in the server orlocation.pathname
in the clientbasename: string
- Optional. Defaults to''
. A route prefix.context: {setCode: (string) => void}
- Optional.setCode: (string) => void
- Called when<Status />
is mounted. Provides an HTTP status code.
onRoute: ({page: string, title: string}) => void
- Optional. Called when a route change happens. Provides a pathname and a title.child: React.Element
- Required.
Route
Defines what gets rendered for a given route. Multiple routes can be rendered at the same time if they exist outside a Switch
component.
import {Router, Route} from 'fusion-plugin-react-router';
<Router>
<Route exact component={component} path={...}>{children}</Route>
</Router>
exact: boolean
- Optional. Whether the route matches exact paths only.component: React.Component
- The component to render if the path matches the current URL.path: string
- Optional. The route to match. If not defined, andexact
is not defined, acts as a catch-all route (e.g. for 404s)children: React.Children
- Optional. Pass-through children. Always render even if the route does not match.
Link
Similar to <a>
, creates a link that routes using history.pushState
rather than a page change.
import {Router, Link} from 'fusion-plugin-react-router';
<Router>
<Link to="{...}">{children}</Link>
</Router>
See the react-router documentation.
Switch
Renders the first child Route
that matches the path.
import {Router, Switch} from 'fusion-plugin-react-router';
<Router>
<Switch>{children}</Switch>
</Router>
children: React.Children<Route>
- React children must beRoute
components.
See the react-router documentation.
Status
Signals to the Router
context that an HTTP status change is required.
import {Router, Route, Status} from 'fusion-plugin-react-router';
<Router>
<Route component={() => <Status code={...}>{child}</Status>} />
</Router>
code: number
- A HTTP Status code to be used if this component is mounted. The status code is sent to acontext.setCode
call inRouter
child: React.Element
- A React element
NotFound
Equivalent to <Status code={404}></Status>
import {Router, Route, NotFound} from 'fusion-plugin-react-router';
<Router>
<Route component={() => <NotFound>{child}</NotFound>} />
</Router>
child: React.Element
- A React element
Redirect
Signals to the Router
context to navigate to a new location.
import {Router, Route, Redirect} from 'fusion-plugin-react-router';
<Router>
<Route component={() => <Redirect to="/">{child}</Redirect>} />
</Router>
to: string|object
- Required. A URL or location to redirect to.push: boolean
- Optional. When true, redirecting will push a new entry onto the history instead of replacing the current one.code: number
- Optional. A HTTP Status code to be used if this component is mounted.
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago