@ForrestJS/react-router

Provides your App with the famous declarative routing library react-router.

Add the Router Context

Providing your App with a react-router Context it's as easy as to list the service into your ForrestJS manifest:

// Import ForrestJS Services:
import reactRoot from "@forrestjs/react-root";
import reactRouter from "@forrestjs/react-router";

// Run the ForrestJS App:
forrestjs.run({
  ...
  services: [reactRoot, reactRouter]
})

The order of the services really doesn't matter.

Add Routes

Inside your App.js you add routes by following the official documentation.

ForrestJS has absolutely nothing to do with how you build your components!

import { Routes, Route } from 'react-router-dom';

// Import my custom routes components:
import { Home } from './Home';
import { Page } from './Page';

// Declare my routes v6 style:
export const App = () => (
  <Routes>
    <Route path="/" element={<Home />} exact />
    <Route path="/page/:id" element={<Page />} />
  </Routes>
);

Set the Browser Component via Configuration

react-root offers different navigation styles based on the type of router that you use:

• BrowserRouter
• HashRouter
• MemoryRouter

By default the BrowserRouter is selected, but you can change this using the ForrestJS manifest configuration:

import { HashBrowser } from 'react-router-dom';

forrestjs.run({
  config: {
    reactRouter: {
      component: HashBrowser,
    },
  },
});

Set the Browser Component in a Feature

You can also override the default Router AND any config defined one by implementing the $REACT_ROUTER_COMPONENT hook:

// Load a custom ReactRouter component and set it up
// as a ForrestJS single hook Feature:
import { HashRouter } from "react-router-dom";
const customBrowser = ["$REACT_ROUTER_COMPONENT", { component: HashRouter }];

// Add your new Feature into the ForrestJS' manifest:
forrestjs.run({
  ...
  features: [app, customBrowser]
});