Создание URL-адресов с помощью React Router из слагов в базе данных - PullRequest
Новая
       15

Создание URL-адресов с помощью React Router из слагов в базе данных

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

У меня есть React SPA, который отображает содержимое из базы данных.

Каждый раз, когда нажимается кнопка, React запрашивает БД и изменяет содержимое без изменения URL.

Я быкак каждый раз, когда нажимается кнопка для React Router, чтобы изменить URL-адрес, чтобы он соответствовал слагу, сохраненному с каждым элементом в БД.

Возможно ли это?

В настоящее время мой файл маршрутов выглядит следующим образом: 

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home.js';
import Component1 from './Component1.js';

export default () =>
(<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/component1" component={Component1} exact />
  <Route path="/component1/:product" component={Component1} />
</Switch>);

Это означает, что если я перейду к www.url.com/component1/bananas, я могу передать prop из bananas компоненту Component1 как this.props.match.params.product.

Но это не помогает мне, я не думаю.

Я бы хотел, чтобы Component1, читая из базы данных, сказал React Router, каким должен быть слаг.

Такое чувство, что вопросы связаны с параметрами URL-адреса, но я хочу динамически генерировать URL-адреса, а не динамически сопоставлять URL-адреса.

Компонент React выглядит следующим образом: 

import React from 'react';
import Airtable from "airtable";

const base = new Airtable({ apiKey: "API_KEY" }).base(
  "BASE_ID"
);

let i = 0;

export default class Component1 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      content: '',
      records: '',
      slug: '',
    };
  }

  componentDidMount() {
    this.getRecords()
  }

  getRecords = () => {
    base("BASE_NAME")
      .select({ view: "Grid view" })
      .eachPage((records, fetchNextPage) => {
        this.setState({ records }, () => this.parseRecord(i));
        fetchNextPage();
      });
  }

  parseRecord = i => {
    const product = this.state.records[i].fields;

    this.setState({
      content: product.Content
      slug: product.Slug
    });
  };

  onClickNext = () => {
    i < this.state.records.length - 2 ? i++ : (i = 0);
    this.parseRecord(i);
  };

  render() {
    return (
      <div>
        <img src={this.state.content} onClick={onClickNext} />
      </div>
    )
  }
...