Question

我对React很新，所以请耐心等待。我在这里有这个按钮：

let showButton
if (schema.type === 'belongs_to') {
  showButton = (
    <Link to={['collections', 'locks', this.props.collectionName]}>
      <button>Visa</button>
    </Link>
  )
}

此按钮会重定向到此网址：http://localhost:3000/#/collections/locks/并且没有任何问题，但是当我添加这个：this.props.id这是一个合法道具，但我得到的网址是这样的：http://localhost:3000/#/collections/locks//。注意最后两个 // 。

我的问题

为什么我的网址会在最后吐出两个 // ？是因为this.props.id是空的吗？正如我所说，我对此非常陌生。感谢所有的支持！

代码：

我只是想说我维护这个项目，所以所有代码都不是由我编写的，因此我可能不知道每个小行。

然而.. this.props.id如果从这里开始：

class DeleteDocument extends Component {
  constructor(props) {
    super(props)
    this.state = { confirmed: false }
  }
  render() {
    return (
      <div className="DeleteDocument">
        <div className="box">
          <div className="title">
            Är du säker på att du vill ta bort dokumentet?
          </div>
          <label>
            <input
              type="checkbox"
              value={this.state.confirmed}
              onChange={e =>
                this.setState({ confirmed: !this.state.confirmed })}
            />
            Ja, jag är säker
          </label>
          <div className="box" />
        </div>
        <div style={{ marginTop: '20px' }}>
          <button
            disabled={!this.state.confirmed}
            onClick={this.props.deleteDocument}
          >
            Ta bort
          </button>
          <div style={{ padding: '15px', borderBottom: '1px solid #ccc' }}>
            <Link to={'/collections/locks/${this.props.id}'}> HERE IT IS
              <button>Avbryt</button>
            </Link>
          </div>
        </div>
      </div>
    )
  }
}

所以我决定使用相同的道具，因为它在这里工作，它的命名似乎适合我的使用（不知道这是否有意义）。

Answer 1

我相信你的假设几乎是正确的，this.props.collectionName可能是空的，还有this.props.id。

对于以下示例，假设_表示空字符串。

我认为Link在这里做的是使用/加入数组中的项目。因此，如果您有['collections', 'locks', '_']，您将获得collections/locks/_。注意最后有一个斜杠，这是因为数组中有一个空项，所以Link确实在它和它之前的项之间放了一个斜杠。不是问题，因为它只是一个斜杠。

现在，如果您现在['collections', 'locks', '_', '_']，locks和_之间应该有斜杠，_和_之间应有斜杠。结果如下所示：collections/locks/_/_，现在您有两个尾部斜杠，我认为这不是URL中的有效移动。

看看你那里的功能范围，你确定你有你想要的道具吗？

希望这能解释这个问题！

Answer 2

将{'/collections/locks/${this.props.id}'}更改为{'/collections/locks/'+ this.props.id}

Answer 3

好像你是id - 是空字符串。因此，您需要在使用this.props.id

的地方共享代码

为什么我的网址会在最后吐出两个//？

我的问题

代码：

3 个答案: