Как обрабатывать бесконечные ссылки с помощью реакции
В настоящее время я создаю веб-сайт книги рецептов на основе ReactJS и react-router.
Вся моя информация сохраняется в JSON, и я обрабатываю все это с помощью axios.
Теперь мой вопрос: у меня есть сетка со всеми моими рецептами, когда я нажимаю на один, используется ссылка для перенаправления меня на другую страницу, например: <Link to = {'/' + name} className = "recipe-styler" id = {name}>
Как я могу перенаправить это, чтобы он открыл страницу и загрузил информацию об этом. Я думал просто перенаправить его, например, на /detailedRecipe и проанализировать всю информацию по ссылке, но я не знаю, возможно ли это.
Ответы 1
Это комбинация динамической маршрутизации с реакция-маршрутизатор-дом и использованием параметров соответствия.
Во-первых, предположим, что у вас есть 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
Без проблем. Рад помочь.
Большое спасибо за информацию! Работает очень хорошо.