Question

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

import {kebabCase} from "lodash";

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

在多个地方创建to参数感觉不对，当我决定更改网址格式时（例如：tag/...而不是tags/...）我将不得不改变所有事件。

我知道Django框架通过使用＆＃34; named urls＆＃34;解决了这个问题。您可以按关键字标识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)}`}>

现在，当您的应用在生产环境中运行时，它将是“专业标签”等等。

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

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

2 个答案: