React Routing

Packages

npm i react-router-dom
npm install @types/react-router-dom

Usage

Enable routing

In src/index.ts:

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Add routing

In App.tsx:

<Container style={{ marginTop: "7em" }}>
    <Route exact path="/" component={HomePage} />
    <Route path="/activities" component={ActivityDashboard} />
    <Route path="/activities/:id" component={ActivityDetails} />
    <Route path="/createActivity" component={ActivityForm} />
</Container>

React-router displays the first route which satisfies the path, even aprtially, that’s why adding exact parameter to the first route is needed.

The third route has a path parameter “id”.

Conditional rendering

Sometimes we not only want to render some component in fixed place based on routing, but possibly we want to display different page layout based on routing. We can then use Route inside of another Route:

return (
    <Fragment>
      <Route exact path="/" component={HomePage} />
      <Route path="/(.+)" render={() => (
          <Fragment>
            <NavBar />
            <Container style={{ marginTop: "7em" }}>
              <Route exact path="/activities" component={ActivityDashboard} />
              <Route path="/activities/:id" component={ActivityDetails} />
              <Route
                key={location.key}
                path={["/createActivity", "/manage/:id"]}
                component={ActivityForm}
              />
            </Container>
          </Fragment>
        )}
      />
    </Fragment>
);

if we navigate to / we will display ONLY HomePage. If we navigate to anything else, we will display appropriate component under a NavBar. path="/(.+)" checks if there is anything after /.

Loading just one route

It might happen that a few routes satisfy the path. We might use Swicth component around our routes to make sure that only one route is loaded.

<Switch>
    <Route exact path="/activities" component={ActivityDashboard} />
    <Route path="/activities/:id" component={ActivityDetails} />
    <Route
      key={location.key}
      path={["/createActivity", "/manage/:id"]}
      component={ActivityForm}
    />
    <Route component={NotFound} />
</Switch>

It’s also a good practice to have a route to “Not Found” page at the end. It’s without a path, because it should “catch” anything that wasn’t caught by previous routes.

There are two components to be used:

Link
NavLink - like Link, but can add styling

Sometimes it’s useful to rended other components as Link. Example:

<Menu.Item name="Activities" as={Link} to="/activities" />

Menu.Item (Semantic UI somponent) will appear as normal, however it will become a link to “/activities”.

With NavLink, “active” clas will be set automatically when clicked on a Menu.Item (class name can be changed, for Semantic UI “active” is correct).

<Menu.Item header as={NavLink} exact to="/">

Again, exact property is needed if we want to highlight only the correct thing.

Route props

When we use router, components have access to additional props, which have various functionalities, i.e. it shows path parameters:

If we want to use some custom path parameters that our component is supposed to receive in URL (like id), we need to create interface for contents of params:

interface IDetailParams {
  id: string;
}

Component then needs to be typed. RouteComponentProps is generic:

const ActivityDetails: React.FC<RouteComponentProps<IDetailParams>>

IDetailParams should contain data that will be in match.params.

One of the props we get is history. It has various methods like goBack(), goForward(), push(), etc. We can use those to navigate.

<Button
    content="Cancel"
    onClick={() => history.push('/activities')}
/>

Adding router props to root component

If a component was not render by router, we can add routing additions (additional props like history), by using withRoute higher order function:

export default withRouter(observer(App));

In this case we’re also using observer from MobX.

Other tips

Router keeps same scrollbar position when routing to different pages. It can be undesired.

MobX →