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

Question

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

import {kebabCase} from "lodash";

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

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

我知道 Django 框架通过使用“命名网址”解决了这个问题。您可以通过关键字识别 URL，并提供参数。然后它将返回格式正确的 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”等等。

<小时/>

更新:您还可以创建一个组件并利用 props 来路由链接，以下只是一个示例:

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)} />

我希望你能这样管理。