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