Slides

React Routing - Going Further

React Router offers a lot of power and flexibility, we will explore the following features in upcoming slides.

  • Validating routes with Regular Expressions
  • Capturing and parsing URL Query Parameters
  • Using Switch Routing Components
  • Rendering a catch all route as a friendly 404
  • Redirecting to other pages or websites

React Routing - RegEx Validation

  • Routes can use Regular Expressions to determine a match
  • Almost all valid RegExs are acceptable, check Path-to-Regexp
  • Path parts can be validated separately

Example

<Route
  path="/:a([A-Za-z]+)"
  render={({ match, props, location }) => (
    <h1>
      All word characters: {match.params.a}
      {console.log({ match })}
      {console.log({ location })}
    </h1>
  )}
/>

React Routing - RegEx Validation Parts

Example

<Route
  path="/:a([A-Za-z]+)/:b(\d+)"
  render={({ match, props, location }) => (
    <h1>
      Words then numbers: {match.params.a} | {match.params.b}
      {console.log({ match })}
      {console.log({ location })}
    </h1>
  )}
/>

CodeSandbox

React Routing - Query Parameters

  • Query parameters are the name=value pairs afte a ? in a URL
  • <Link /> Components can pass URL Parameters to a Route
  • The to param works differently between strings and objects
  • Params can be parsed using new URLSearchParams(params)

Example

const Nav = props => {
  return (
    <div>
      <Link to="/path?id=42">Params within 'to'</Link>
      <br />
      <Link to={{ pathname: "/path?id=9000" }}>Params within Pathname</Link>
      <br />
      <Link to={{ pathname: "/path", search: "id=789" }}>
        Params 'Search' property
      </Link>
    </div>
  );
};

CodePen

React Routing - Switch Component

  • Useful to avoid over matching
  • Switch renders only the first matching <Route> instead of all
  • Can be used to build a catch all route for 404 like pages

Example

const App = props => {
  return (
    <BrowserRouter>
      <React.Fragment>
        <Nav />
        <Switch>
          <Route path="/posts" component={Posts} />
          <Route path="/authors" component={Authors} />
          <Route path="/:author/:post" component={AuthorPost} />
          <Route exact path="/" component={Home} />
        </Switch>
      </React.Fragment>
    </BrowserRouter>
  );
};

CodeSandbox

React Routing - Catch All Route

  • Catch all routes can be useful to prevent 404 errors
  • Allow for a 'helpful' message, instead of a "Page Not Found" HTTP error
  • Are easy to create with the <Switch> and <Route> components

Example

const NotFound = () => (
  <div>
    <h1>That page was not found</h1>
  </div>
);

const App = props => {
  return (
    <BrowserRouter>
      <React.Fragment>
        <Nav />
        <Switch>
          <Route path="/posts" component={Posts} />
          <Route path="/authors" component={Authors} />
          <Route exact path="/" component={Home} />
          <Route path="" component={NotFound} />
        </Switch>
      </React.Fragment>
    </BrowserRouter>
  );
};

CodeSandbox

React Routing - Redirection

Examples

const Home = () => <h1>You are Home</h1>;
const Posts = () => <h1>All the Posts</h1>;

const App = props => {
  return (
    <BrowserRouter>
      <React.Fragment>
        <Nav />
          <Route path="/posts" component={Posts} />
          <Route path="/willredirect" render={() => (
            <Redirect to="/posts" />
          )} />
          <Route exact path="/" component={Home} />
      </React.Fragment>
    </BrowserRouter>
  );
};

CodeSandbox