навигация из массива в react-router

Question

Мне нужно сделать так, чтобы навигация выводилась из массива вида: { main: 'Main', about: 'About', contacts: 'Contacts', error : 'Error'};

Сама навигация у меня работает, но куда там лепить массив, я не понимаю.

import React from 'react';
import './App.css';
// pages
import Main from '../pages/main/Main';
import About from '../pages/about/About';
import Contacts from '../pages/contacts/Contacts';
import Error from '../pages/error/Error';
// components
import Header from '../header/Header';
import Footer from '../footer/Footer';
// router
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
} from "react-router-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }
  render() {

    let navigation = {
      main: 'Main',
      about: 'About',
      contacts: 'Contacts',
      error: 'Error',
    }

    return (
      <Router>
        <div className='app container'>
          <Header />
          <ul className="nav">
            <li><Link to="/">Main</Link></li>
            <li><Link to="/About">About</Link></li>
            <li><Link to="/Contacts">Contacts</Link></li>
          </ul>

          <Switch>
            <Route exact path="/" component={Main} />
            <Route path="/About" component={About} />
            <Route path="/Contacts" component={Contacts} />
            <Route component={Error} />
          </Switch>
          <Footer />
        </div>
      </Router>
    )
  }
}

export default App;

Answer 1

Во-первых, navigation у тебя объект, а не массив. А, во-вторых. Сделай так

let sourceRoutes = [
    {
        title: 'Main',
        path: '/',
        component: Main,
        exact: true,
    }
];

Ну, а дальше через map выводи линки и сами роуты. Пример:

sourceRoutes.map(item => {
    <Route exact={item.exact} path={item.path} component={item.component} />
})

Answer 2

Я разобрался.

    let nav = {
      main: '/',
      about: '/about',
      contacts: '/contacts'
    }

<nav>
     <ul className="nav">
      {Object.keys(nav).map((elem, i) => {
        return <li key={i}> <Link to={nav[elem]}>{elem} </Link> </li>
      })}
     </ul>
</nav>

БЛОГ НА HUSL

навигация из массива в react-router

Ответы (2 шт):