Skip to main content

Components

[draft: better description of RouterView and other components]

The heart of the router is the RouterView component. RouterViews are 'named' and can be nested.

return (
  <RouterView name="main" />
)

The name of the router view 'matches' the name defined under the components configuration property of the route configuration object.

There is also an example RouterLink component in the router folder under components here...

https://github.com/infonomic/redux-saga-router/tree/main/src/lib/redux-saga-router/components

Below are suggested examples of other components you may wish to create on a per-project basis.

[draft: more examples]

Buttons​

Router button​

PUSH param here is used here to add this route locationStack

For more information on locationStack variable check this doc

<Button
  component={RouterButton}
  mode={PUSH}
  to={L.LocationModuleName.locationName({ id })} // Here you can pass parameters defined in locations file
>
  Cancel
</Button>

Return button​

ReturnButton and ReturnLink are navigating you to previous location in locationStack

For more information on locationStack variable check this doc

<ReturnButton>
  Back
</ReturnButton>

CLEAR param here is used here to clear locationStack

For more information on locationStack variable check this doc

<RouterLink
  to={L.LocationModuleName.locationName()}
  mode={CLEAR} 
  exact
>
  Link text
</RouterLink>

ReturnLink and ReturnButton are navigating you to previous location in locationStack

For more information on locationStack variable check this doc

<ReturnLink>
  Back
</ReturnLink>

For more information on useBreadcrumbs hook check this doc

function Breadcrumbs() {
  const breadcrumbs = useBreadcrumbs()
  const theme = useTheme()

  return (
    <div className="breadcrumbs">
      {breadcrumbs.map(({ title, location, current }) => (
        current
          ? <span key={location.name}>{title}</span>
          : (
            <React.Fragment key={location.name}>
              <Link to={location}>{title}</Link>
              {' > '}
            </React.Fragment>
          )
      ))}
    </div>
  )
}