CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-hooks
sliim35
sliim35

Reputation: 25

React-router <Link> doesn't work with react 16.8 correctly

Have a problem with react-router 5.0.0 and react 16.8

With NavLink app works as expected but with Link i got an error as

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

error message

import React, { Component } from 'react';

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

import { Content } from '../../components/content/Content';

export class Home extends Component {
  render() {
    return (
      <Content>
        <Link to="/">Home Page</Link>
      </Content>
    );
  }
}

[SOLVED] I don't restart the app when converting functional component into class. The first one doesn't have history prop provided by Router

Upvotes: 1

Views: 879

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

From the error message:

you might have mixed up default and named imports

You should be mixing the import statement. Follow the below convention to resolve your issue:

import Content from '...';
// for a default export

Rather than a named export:

import { Content } from '...'
// for a named export

See these reference to understand the named export and default export: import and export

Upvotes: 1

jujiyangasli
jujiyangasli

Reputation: 360

Wrong import statement.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md

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

<Link to="/about">About</Link>

Upvotes: 0

Related Questions