3.5.8 • Published 2 years ago

fusion-plugin-react-router v3.5.8

Weekly downloads
308
License
MIT
Repository
github
Last release
2 years 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

2 years ago

3.5.7

2 years ago

3.5.6

2 years ago

3.5.5

2 years ago

3.5.3

3 years ago

3.5.2

3 years ago

3.5.1

3 years ago

3.5.0

3 years ago

3.5.4

3 years ago

3.4.2

3 years ago

3.4.1

3 years ago

3.4.0

3 years ago

3.2.2

3 years ago

3.2.1

3 years ago

3.2.0

3 years ago

3.3.0

3 years ago

3.1.1

3 years ago

2.4.0

3 years ago

2.3.5

3 years ago

3.1.0

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.3.2

4 years ago

2.3.4

3 years ago

2.3.3

3 years ago

2.3.1

4 years ago

2.3.0

4 years ago

2.2.16

4 years ago

2.2.15

4 years ago

2.2.14

4 years ago

2.2.13

4 years ago

2.2.12

4 years ago

2.2.11

5 years ago

2.2.10

5 years ago

2.2.9

5 years ago

2.2.8

5 years ago

2.2.7

5 years ago

2.2.6

5 years ago

2.2.5

5 years ago

2.2.4

5 years ago

2.2.3

5 years ago

2.2.2

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.1.3

5 years ago

2.1.2

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.8

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.5.4

6 years ago

1.5.4-0

6 years ago

1.5.3

6 years ago

1.5.3-alpha.1

6 years ago

1.5.3-alpha.0

6 years ago

1.5.2

6 years ago

1.5.2-2

6 years ago

1.5.2-1

6 years ago

1.5.2-0

6 years ago

1.5.1

6 years ago

1.5.1-0

6 years ago

1.5.0

7 years ago

1.5.0-2

7 years ago

1.5.0-1

7 years ago

1.4.2

7 years ago

1.4.2-0

7 years ago

1.4.1

7 years ago

1.5.0-0

7 years ago

1.4.0

7 years ago

1.3.0

7 years ago

1.2.0

7 years ago

1.2.0-0

7 years ago

1.1.3

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.3-0

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.4.3

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.0

7 years ago

0.2.3

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.10

8 years ago

0.1.9

8 years ago

0.1.8

8 years ago

0.1.4

8 years ago

0.1.3

8 years ago

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago