0

我有一个显示数据库内容的 React SPA。

每次单击按钮时，React 都会查询数据库，并在不更改 URL 的情况下更改内容。

我希望每次单击按钮以使 React Router 更改 URL 以匹配存储在 db 中的每个项目的 slug。

这可能吗？

目前我的路线文件如下所示：

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，我可以将propof作为传递bananas给组件。Component1this.props.match.params.product

但这对我没有帮助，我不认为。

我想Component1从数据库中读取，告诉 React Router slug 应该是什么。

感觉这些问题与 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>
    )
  }
4

0 回答 0