Question

我有一个组件在componentDidMount（）中具有访存调用。我想使用URL路由来动态更改我的提取调用。在我的index.js中，我有：

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/home" component={Home} />
      <Route exact path="/" component={App} />
    </div>
  </Router>,
  document.getElementById("root")
);

我要使用home组件。

class Home extends Component {
  render() {
    return (
      <div>
        <Station station="MARS" />
        <Station station="VENUS" />
      </div>
    );
  }
}

工作站组件将具有3个链接，分别指向A，B或C：

class Station extends Component {
  render() {
    return (
      <Router>
        <div>
          <h2>{this.props.station}</h2>
          <ul>
            <li>
              <Link to={station + "/A"}>Inbound</Link>
            </li>
            <li>
              <Link to={station + "/B"}>Outbound</Link>
            </li>
            <li>
              <Link to={station + "/C"}>Snow Desk</Link>
            </li>
          </ul>
          <Switch>
            <Route exact path={station + "/A"} component={App} />
            <Route exact path={station + "/B"} component={App} />
            <Route exact path={station + "/C"} component={App} />
          </Switch>
        </div>
      </Router>
    );
  }
}

我正在渲染的App组件将始终相同，它只是根据路径“ MARS / A”或“ VENUS / B”还是“ SATURN / C”接收不同的数据...这些实际上是只是我从后端提供给单个组件的.CSV文件的名称。

在我的App组件的componentDidMount（）中，我试图使提取动态化：

  componentDidMount() {
    let location = this.props.location.pathname;
    console.log(location);

    fetch(
      "http://**********************:9090/parse/serve?file=SATURN/1.csv"
    )
...

如您所见，SATURN / A是硬编码的...但是我想通过路由器从URL路径更改它。

现在，我运气不佳，因为有时该路径会将链接列表呈现在App组件的顶部，否则将不会呈现任何内容。另外，如果我多次单击该链接，它会重复附加到URL上，例如：/ SATURN / A / STATURN / A ...

我希望这是有道理的。感谢您抽出宝贵的时间阅读我的帖子。

编辑*

我知道这不是React的方式，但是现在，我将对所有路径进行硬编码：

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/home" component={Home} />
      <Route exact path="/MARS/A" component={App} />
      <Route exact path="/MARS/B" component={App} />
      <Route exact path="/MARS/C" component={App} />
      <Route exact path="/SATURN/A" component={App} />
      <Route exact path="/SATURN/B" component={App} />
      <Route exact path="/SATURN/C" component={App} />
      <Route exact path="/EARTH/A" component={App} />
...
...
    </div>
  </Router>,
  document.getElementById("root")
);

Answer 1

请尝试使用反引号在fetch语句中使用插值字符串：

componentDidMount() {
  let location = this.props.location.pathname;
  console.log(location);

  fetch(
  `http://**********************:9090/parse/serve?file=${location}.csv`
  )
  ...

反引号内的语法${ expression }将评估该JSX表达式。

React Router Dom多路径1动态组件

1 个答案: