Validate routes referenced by <Link>
and friends in a Remix app.
Remix apps generally have ESLint pre-configured, but if not you'll want to set it up:
npm i eslint --save-dev
Next, install eslint-plugin-remix-react-routes
:
npm install eslint-plugin-remix-react-routes --save-dev
If your app uses TypeScript, you're encouraged to also configure typed linting (and set up typescript-eslint
while you're at it!). This allows the plugin to fully leverage the type system when evaluating route expressions. To enable typed linting:
npm install @typescript-eslint/parser --save-dev
And add something along these lines to your .eslintrc.js
:
module.exports = {
// ...
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
tsconfigRootDir: __dirname,
},
};
Most apps should extend from one of the following configurations:
recommended
: Recommended route rules that you can drop in to a Remix project.strict
: Like recommended
, but more strict and opinionated.Add something like this to your .eslintrc.js
:
module.exports = {
// ...
extends: [
// ...
"plugin:remix-react-routes/recommended",
],
};
You can also override any config rules to meet your needs:
module.exports = {
// ...
rules: {
// ...
"remix-react-routes/no-relative-paths": [
// downgrade to a warning
"warn",
// enable this check in route components
{ enforceInRouteComponents: true },
],
},
};
<Link to>
rather than <a href>
<Link>
and friends point to actual routes in the app<Link>
and friends use absolute paths<Link>
and friends use paths rather than URLs