Как получить динамически загрузку Navbar React

Question

Я пытаюсь получить Nav NavItem динамически, я смог заполнить, но не динамически, я хотел бы сделать следующее: у меня на сайте есть домашняя страница с последней версией.новости, а также разделы «Политика», «Технологии», «Бизнес» ... для поиска по каждой категории, но единственное, что меняется между ними, - это идентификатор категории, код, который я смог сделать:

CustomNavbar.jsx
    render() {
            return (
                <Navbar default collapseOnSelect>
                    <Navbar.Header>
                        <Navbar.Toggle />
                        <Navbar.Brand>
                            <Link id="Link" to="/">
                                <img src={logo} height="30" alt="logo"/>
                            </Link>
                        </Navbar.Brand>
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav pullRight>
                            <NavItem eventKey={1} componentClass={Link} to="/politics" href="/politics">
                                POLITICS
                            </NavItem>
                            <NavItem eventKey={2} componentClass={Link} to="/business" href="/business" >
                                BUSINESS
                            </NavItem>
                            <NavItem eventKey={3} componentClass={Link} to="/tech" href="tech">
                                TECH
                            </NavItem>
                            <NavItem eventKey={4} componentClass={Link} to="/science" href="science">
                                SCIENCE
                            </NavItem>
                            <NavItem eventKey={5} componentClass={Link} to="/sports" href="sports">
                                SPORTS
                            </NavItem>
                            <NavItem eventKey={6} id="Login" componentClass={Link} to="/login" href="login" >
                                LOGIN
                            </NavItem>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            );

Я хочу заполнить мои NavbarItems чем-то вроде этого:

CustomNavbar.jsx

constructor(props) {
        super(props);
        this.state = {
            'items': [],
            isLoading: false,
            error: null,
        };
    }

    componentDidMount() {
        this.getItems();
    }

    getItems() {
        this.setState({ 'isLoading': true });

        fetch('xxx/api/category/')
            .then(results => {
                if (results.ok) {
                    return results.json();
                } else {
                    throw new Error('Something went wrong ...');
                }
            })
            .then(results => this.setState({ 'items': results, 'isLoading': false }))
            .catch(error => this.setState({ error, isLoading: false }));
    }    


render() {
        return (
            <Navbar default collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Toggle />
                    <Navbar.Brand>
                        <Link id="Link" to="/">
                            <img src={logo} height="30" alt="logo"/>
                        </Link>
                    </Navbar.Brand>
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav pullRight>
                        {this.state.items.map(function (item, index) {
                            <NavItem eventKey={index} componentClass={Link} 
                             to="/categories/" + {item.name}" href="/categories/" + {item.name}>
                                {item.name}
                            </NavItem>

                         })}


                            LOGIN
                        </NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );

Мои маршруты:

App.js

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home/Home';
import Politics from './components/Politics/Politics';
import Business from './components/Business/Business';
import Tech from './components/Tech/Tech';
import Science from './components/Science/Science';
import Sports from './components/Sports/Sports';
import Login from './components/User/Login/Login';
import User from './components/User/User/User';
import Navbar from './components/CustomNavbar/CustomNavbar';

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar></Navbar>
          <Route exact path="/" component={Home}/>
          <Route path="/politics" component={Politics}/>
          <Route path="/business" component={Business}/>
          <Route path="/tech" component={Tech}/>
          <Route path="/science" component={Science}/>
          <Route path="/sports" component={Sports}/>
          <Route path="/login" component={Login}/>
          <Route path="/user" component={User}/>
        </div>
      </Router>
    );
  }
}

export default App;

Я хочу заполнить эти категории как Категория, без необходимости повторять код для монтирования экрана, что, как я думал, будет передавать значение категории через URL, но я не знаю, как это сделать в React, любая помощь?

Ожидаемый результат:

Структура текущей папки:

Структура результата папки:

Спасибо!

Answer 1

На основе видимости контекста поста вы можете создавать динамически, как это.

Решение: Вы передали имя категории в качестве параметра url и извлекли его в компоненте (в моем примере это будет Category).

// some import statements

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Navbar />
        <Switch>
          <Route path="categories/:categoryName" component={Category} />
        </Switch>
      </BrowserRouter>
    )
  }
}

// Category component

class Category extends React.Component {
  render() {
    const { categoryName } = this.props.match.params;
    return (
      // based on the category name you can render what you want
    )
  }
}

Альтернативным способом может быть компонент высшего порядка.