React Router Dom Несколько путей 1 Динамический компонент - PullRequest
Новая
       17

React Router Dom Несколько путей 1 Динамический компонент

0 голосов
/ 07 февраля 2019

У меня есть один компонент, у которого есть вызов выборки в componentDidMount ().Я хочу использовать маршрут URL для динамического изменения моего вызова извлечения.В моем index.js у меня есть: 

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

Из домашнего компонента я хочу использовать компонент станции. 

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

Компонент приложения, который я отображаю, всегда будет одним и тем же, он будет просто получать разные данные в зависимости от того, является ли путь "MARS / A" или "VENUS / B 'или' SATURN / C '... на самом деле это просто имена файлов .CSV, которые я передаю одному компоненту из моего бэкенда.

В моем компоненте приложения, в componentDidMount(), Я пытаюсь сделать выборку динамической: 

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

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

Как вы можете видеть, SATURN / A жестко закодирован ... но я хочу изменить это из пути URL-адреса с помощью маршрутизатора.

Прямо сейчас мне не очень повезло, так как иногда путь отображает мой список ссылок поверх компонента приложения или ничего не отображает.Кроме того, если я нажимаю ссылку несколько раз, она добавляется к 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")
);

1 Ответ

0 голосов
/ 07 февраля 2019

Попробуйте использовать интерполированную строку в операторе fetch, используя вместо этого обратные метки: 

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

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

Синтаксис ${ expression }, заключенный в обратные метки, будет оценивать это выражение JSX.

...