Question

我正在使用react-router v4，我的组件应该出现在'/'和'/ view /：id'中。

在公共组件中，当路由为'/ view /：id'时我可以访问位置但是我想知道是否有一种方法可以访问'id'参数。

这是我正在使用的代码和快速demo。

 <Router>
    <div>
      <ul style={{ listStyleType: "none", padding: 0 }}>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/view/a">a</Link>
        </li>
        <li>
          <Link to="/view/b">b</Link>
        </li>
      </ul>
      <hr />
      <Route
        path="/"
        render={ ({match}) => (
          <div>
            <div>
              <b>Common component</b>
              <p>{"Params " + JSON.stringify(match.params)}</p>
              <i>How to access params.id here?</i>
            </div>
            <hr />
            <Route
              path="/view/:id"
              render={({ match }) => <div>{"Params " + JSON.stringify(match.params)}</div>}
            />
          </div>
        )}
      />
    </div>
  </Router>

Answer 1

您的问题：“当路径为”/“时，如何访问参数 id ？”

您无法访问不通过的参数。

在链接A和B中，您将在URL中传递参数。 path="/view/:id" id是关键，值将是您在URL中传递的变量。

当您访问root时，没有传递给它的参数path="/"

React-router v4与参数共享组件

1 个答案: