Как обращаться с бесконечными ссылками с реагировать - PullRequest
Новая
       15

Как обращаться с бесконечными ссылками с реагировать

0 голосов
/ 13 марта 2019

В настоящее время я создаю веб-сайт книги рецептов, основанный на ReactJS и реакции-маршрутизаторе.Вся моя информация сохраняется в JSON, и я обрабатываю все это с помощью axios.Теперь мой вопрос: у меня есть сетка со всеми моими рецептами, когда я нажимаю на один, он использует ссылку, чтобы перенаправить меня на другую страницу, например:
<Link to={'/' + name} className="recipe-styler" id={name}>

Как я могу перенаправить этопоэтому он откроет страницу и загрузит информацию об этом.Я думал о том, чтобы просто перенаправить его, например, на / detailRecipe и проанализировать всю информацию, передаваемую по ссылке, но я не знаю, возможно ли это.

1 Ответ

1 голос
/ 13 марта 2019

Это комбинация динамической маршрутизации с response-router-dom и использованием параметров соответствия.

Сначала, скажем, у вас есть 3 маршрута в приложении, представление списка, представление сведенийи запасной маршрут (например, страница ошибки).Это будет выглядеть примерно так: 

<Router>
  <Switch>
    <Route exact path="/recipes" component={ListComponent} />
    <Route path="/recipes/:id" component={DetailsComponent} />
    <Route component={ErrorPage} />
  </Switch>
</Router>

Теперь вы можете установить ссылки в вашей сетке примерно так: 

<Link to={`/recipes/${item.id}`} className="recipe-styler" />

Наконец, когда вы нажимаете на ссылку,и маршрутизатор перенаправляет вам DetailsComponent, вы можете получить идентификатор ссылки следующим образом. 

export class DetailsComponent extends React.Component {
  componentDidMount() {
    const { match } = this.props;
    if (match) {
      // This line is pseudocode. 
      // Use the id to get the item details from api, redux or wherever.
      api.get(params.id)
    }
  }

  render() {
    ...
  }
}

Маршрутизатор внедрит объект match.params, когда он разрешит маршрут.Имя реквизита из объекта params зависит от того, как вы назвали его в объявлении маршрутизатора, например 

<Route path="/recipes/:recipeId" component={DetailsComponent} /> // params.recipeId
<Route path="/recipes/:id" component={DetailsComponent} /> // params.id
...