React router component props не принимает компонент <Link />?

Что в этом плохого?

import { Switch, Route, Link } from 'react-router'
<Route path='/' component = {() => {
    return (
      <div>
        <Link to='/'>Home</Link>
        <Link to='/users'>Users</Link>
      </div>
    )
  }}
/>

Я получил ошибку

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined

но если я просто сделаю это, все в порядке

<Route path='/' component = {() => {
    return (
      <div>
        Home
      </div>
    )
  }}
/>

javascript reactjs redux react-router-v4

07.04.2018 07:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Компонент Link экспортируется не в пакете react-router, а в react-router-dom.

Вам нужно установить его, используя

npm install -S react-router-dom

а затем используйте его как

import { Link } from 'react-router-dom';

<Route path='/' render = {(props) => {
    return (
      <div>
        <Link to='/'>Home</Link>
        <Link to='/users'>Users</Link>
      </div>
    )
  }}
/>

Также при использовании функционального компонента, встроенного в Route, используйте опору render, а не опору component с функциональным аргументом в качестве опоры.

ах, неудивительно, но есть какая-то подсказка, почему <Link /> здесь не нажимается? codeandbox.io/s/jz245lr48v

— 07.04.2018 07:23

а для сохранения пакета npm вам просто нужен npm i, верно?

— 07.04.2018 07:55

Проверьте это, stackoverflow.com/questions/43994510/… нужно для записи <Switch> <Route path='/users' component = {UsersContainer} /> <Route path='/' render = {(props) => <div>Content for Home</div>} /> </Switch>

— 07.04.2018 08:07

07.04.2018 07:16