React Route

Path-to-RegExp with React Location.

Installation

npm install @blakeembrey/react-route --save

Usage

Use with React Location.

import {
  Route,
  Switch,
  useRoutePath,
  useMatch,
  usePathMatch,
  usePathCompile,
} from "@blakeembrey/react-route";

Route

Conditionally renders component when the path matches the active URL.

const App = () => {
  return (
    <Route
      path="/page/:id"
      component={(params) => <div>{JSON.stringify(params)}</div>}
    />
  );
}; // `/123` => `<div>["123"]</div>`

Supports path-to-regexp properties:

• sensitive When true, the regexp will be case sensitive. (default: false)
• strict When true, optional trailing delimiters will not match. (default: false)
• end When true, the regexp will match to the end of the string. (default: true)
• start When true, the regexp will match to the beginning of the string. (default: true)

Switch

Component for matching and rendering the first <Route /> of children.

const App = () => {
  return (
    <Switch fallback={...}>
      <Route path="/me" component={() => <span>Blake</span>} />
      <Route path="/:id" component={({ id }) => <div>{id}</div>} />
      <Route end={false} component={() => <div>404 Not Found</div>} />
    </Switch>
  );
}; // `/me` => `<span>Blake</span>`

useRoutePath

Returns the current pathname based on the router (e.g. route prefixes are removed).

useRoutePath(); //=> "/foo"

useMatch

Create a path-to-regexp match function and run it on the current path.

const App = () => {
  const result = useMatch("/test");

  return <div>{JSON.stringify(result)}</div>;
}; //=> `<div>{"params":[],"index":0,"path":"/test"}</div>`

usePathMatch

Create a path-to-regexp match function.

const App = () => {
  const match = usePathMatch("/test");

  return <div>{JSON.stringify(match("/"))}</div>;
}; //=> `<div>false</div>`

usePathCompile

Creates a path-to-regexp path function.

const App = () => {
  const path = usePathCompile("/:id")({ id: 123 });

  return <Link to={path}>User {id}</Link>;
};

TypeScript

This project uses TypeScript and publishes definitions on NPM.

License

Apache 2.0