3.5.8 • Published 1 year ago

fusion-plugin-react-router v3.5.8

Weekly downloads
308
License
MIT
Repository
github
Last release
1 year ago

fusion-plugin-react-router

Build status

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
NameTypeDescription
UniversalEventsTokenUniversalEventsAn 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 be ctx.url in a Fusion plugin, or req.url in the server or location.pathname in the client
  • basename: 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, and exact 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 be Route 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 a context.setCode call in Router
  • 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.
3.5.8

1 year ago

3.5.7

1 year ago

3.5.6

1 year ago

3.5.5

1 year ago

3.5.3

1 year ago

3.5.2

1 year ago

3.5.1

1 year ago

3.5.0

1 year ago

3.5.4

1 year ago

3.4.2

1 year ago

3.4.1

2 years ago

3.4.0

2 years ago

3.2.2

2 years ago

3.2.1

2 years ago

3.2.0

2 years ago

3.3.0

2 years ago

3.1.1

2 years ago

2.4.0

2 years ago

2.3.5

2 years ago

3.1.0

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.3.2

2 years ago

2.3.4

2 years ago

2.3.3

2 years ago

2.3.1

2 years ago

2.3.0

3 years ago

2.2.16

3 years ago

2.2.15

3 years ago

2.2.14

3 years ago

2.2.13

3 years ago

2.2.12

3 years ago

2.2.11

3 years ago

2.2.10

3 years ago

2.2.9

4 years ago

2.2.8

4 years ago

2.2.7

4 years ago

2.2.6

4 years ago

2.2.5

4 years ago

2.2.4

4 years ago

2.2.3

4 years ago

2.2.2

4 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.3

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.0

5 years ago

2.0.8

5 years ago

2.0.7

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.5.4

5 years ago

1.5.4-0

5 years ago

1.5.3

5 years ago

1.5.3-alpha.1

5 years ago

1.5.3-alpha.0

5 years ago

1.5.2

5 years ago

1.5.2-2

5 years ago

1.5.2-1

5 years ago

1.5.2-0

5 years ago

1.5.1

5 years ago

1.5.1-0

5 years ago

1.5.0

5 years ago

1.5.0-2

5 years ago

1.5.0-1

5 years ago

1.4.2

5 years ago

1.4.2-0

5 years ago

1.4.1

6 years ago

1.5.0-0

6 years ago

1.4.0

6 years ago

1.3.0

6 years ago

1.2.0

6 years ago

1.2.0-0

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.3-0

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.4.3

6 years ago

0.4.2

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.10

6 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.4

6 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago