React Router Dom Multiple Paths 1 Dynamic Component

Question

I have one component that has a fetch call in componentDidMount(). I want to use the URL route to dynamically change my fetch call. In my index.js, I have:

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

From the home component, I want to use a station component.

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

The station components will have the 3 links, to A, B, or C, for example:

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>
    );
  }
}

The App component I am rendering will always be the same, it will just be receiving different data based on whether it's path 'MARS/A' or 'VENUS/B' or 'SATURN/C'... these are actually just names of .CSV files I'm serving to the single component from my back-end.

In my App component, in the componentDidMount(), I am trying to make the fetch dynamic:

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

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

As you can see, SATURN/A is hardcoded... but I want to change that from the URL path with the Router.

Right now, I'm not having much luck, as sometimes the path will render my link list on top of the App component or it won't render anything. Also, if I click the link multiple times it appends to the URL repeatedly like: /SATURN/A/STATURN/A...

I hope this makes sense. Thank you for taking the time to read my post.

EDIT*

I know it's not the React way, but for now, I'll just hard code all the paths:

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

Try using an interpolated string within the fetch statement using backticks instead:

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

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

The syntax ${ expression } wrapped inside of backticks will evaluate that JSX expression.