避免在 React 组件中手动输入 URL

Question

我正在迈出与 Gatsby 的第一步，我发现我经常重复自己的话。一个例子是建立链接，我在几个地方做了类似的事情：

import {kebabCase} from "lodash";

// ...
    <Link to={`tags/${kebabCase(tag)}`}>
      {tag}
    </Link>

在几个地方创建 to 参数感觉不对，当我决定更改 URL 格式时（例如：tag/... 而不是 tags/... ) 我将不得不更改所有出现的地方。

我知道 Django 框架使用 "named urls" 解决了这个问题。您可以通过关键字识别 URL，并提供参数。然后它将 return 格式正确的 URL。是像 Gatsby 或 React 的这一部分，还是任何其他方法来解决这个问题？

天真地，我的代码示例是：

import {urlmaker} from "urlutil"

//...
    <Link to={urlmaker(`tag`, { tagname: {tag} })}>
      {tag}
    </Link>

我认为这对我自己来说并不难实现，但我很好奇是否有任何标准化的 React 或 Gatsby 方法来处理这个问题。

Answer 1

你可以全局定义一个常量并使用它，这样你只需要在需要的时候改变你定义常量的地方的值。例如。你可以定义开发和生产环境常量：

// Development Environment
const TAGS = 'tags';

// Production Environment
const TAGS = 'pro-tags';

然后您可以简单地使用该常量。

<Link to={`${TAGS}/${kebabCase(tag)}`}>

现在，当您的应用程序在生产环境中运行时，它将是 'pro-tags' 等等。

更新：你也可以制作一个组件，利用道具来路由link，下面只是一个例子：

export class OptionalLink extends React.Component {

    render( ) {

     return this.props.dateProp
       ? <Link to={`${this.props.dateProp}/${this.props.pathProp}`} {... this.props} />
       : <Link to={`${someDefaultDate}/${this.props.pathProp}}`} { ... this.props} />;

    }
};

现在，您可以使用 <OptionalLink dateProps="2018-apr-23" pathProp={kebabCase(tag)} />

希望你能做到这一点

Answer 2

将此作为答案发布，但希望更有知识的人能提出更标准化的方法。

我需要的功能可以通过创建一个对象来处理路由来实现。

utilities/routing.js

import {kebabCase} from "lodash";

export const makeRoute = {
  tagPage: ({tag}) => `/tag/${kebabCase(tag)}/`,
  blogPage: ({title, date}) => `/blog/${date}_${kebabCase(title)}/`
};

现在你已经在一个中心位置定义了路由，用于你的 React 组件或其他配置文件：

component.js

import {makeRoute} from "../utilities/routing";
...
        <Link to={ makeRoute.tagPage({tag}) }>
          {tag}
        </Link>

为了在 Gatsby 中保持一致性，在 createPage api 中也使用此方法。 Gatsby 在 React-router 中注册页面，显然我们希望它们匹配。

gatsby-node.js

import {makeRoute} from "utilities/routing";
...
    createPage({
      path: makeRoute.tagPage({tag}),
      component: path.resolve("./src/templates/tag.js"),
      context: { tag, },
    });

避免在 React 组件中手动输入 URL

Avoid entering URLs manually in the React components

javascript

reactjs

gatsby