React Router Dom多路徑1動態組件

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組件中使用station組件。

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表達式。