0

Мне нужно сделать так, чтобы навигация выводилась из массива вида: { 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;

2 ответа 2

1

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

    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>
0

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

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

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

sourceRoutes.map(item => {
    <Route exact={item.exact} path={item.path} component={item.component} />
})
2
  • объект - ассоциативный массив. А по поводу вопроса, я разобрался. Ниже ответ.
    – forzeeh
    17 фев 2020 в 19:36
  • Да, действительно, в доке пишут, что обьект можно считать ассоциативным массивом. Хотя по сути, общего то у них с массивом ничего нет. Хоть и массив в js является объектом, но методы у них разные, js такой js... Но всётаки, я бы не стал обьект называть массивом, хотя бы потому, что Array.isArray() выдаст false. 18 фев 2020 в 4:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.