Создать программируемый маршрут, сравнивая массивы и состояние в React

Question

Я хочу создать категорию для разных предметов.из массива печатаются элементы, и эти элементы создают соответствующий маршрут соответствующим образом, сравнивая его с другими элементами в другом массиве и создавая маршрут для этого.

ДЛЯ ПЕРВОГО МОДУЛЯ

const categ = ['Sports', 'Entertainment', 'Politics', 'Global']

{ categ.map((category) => {
                return (<NavLink to={`/${categoryLink}`} key={category}>{category}</NavLink>)
            })}

(я понятия не имею, как сделать 'categoryLink'

для второго (не фактически массива)

const debateTwo = store.dispatch(createDebate({
teamOneImg: <img src={Img} />,
teamTwoImg: <img src={Img} />,
startTime: 0,
debateDesc: 'Batman V Superman',
teamOneDesc: 'Batman  ',
teamTwoDesc: 'Superman',
teamOneScore: '50',
teamTwoScore: '50',
category: 'Entertainment',
tags: '#

, поэтому, когда я сравниваю их оба, ссылка, которая показывает дляВ категории «Развлечения» должны отображаться эти элементы. Как мне это сделать? Или есть какой-то другой способ создать категорию в React. Я новичок в этом. Пожалуйста, помогите мне

Answer 1

Нет конкретного способа создать категорию в Reactjs.То, как вы делаете, вы должны создать маршрут и компонент для каждого.

const categ = ['Sports', 'Entertainment', 'Politics', 'Global'];

• Для каждого элемента в массиве или любой ссылки, которую вы хотите создать, создайте маршрут и компоненты.

  <Route path="sports" component={Sports} /> <Route path="entertainment" component={Entertainment} />

Или

{ categ.map((category) => {
  const link = category.toLowerCase();
  return (<Route path=`${link}` component={category} />)
})}

Вы должны явно создать компонент для каждого и импортировать их с тем же именем.

Но если вы хотите загружать данные динамически для каждой категории:

• Затем создайте только один маршрут для категории и введите ей идентификатор илиимя параметра, например categoryName.

  <Route path="/category/:categoryName" component={category} />

• Затем создайте компонент категории и загрузите данные на основе идентификатора для каждой категории

представьте это как компонент категории:

const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
    // You can access the params (:/categoryName)
    // you provide to route in this.props.params,
    // like this.props.params.categoryName
    const getCategoryData = categ.filter( category === this.props.params.categoryName
    return (
        <div>{
         getCategoryData
        }</div>
)

Это очень простой пример. Я просто хочу дать вам идею.Способ реализации категории зависит от реализации вашей модели, а не от библиотеки Reactjs.