CODEWITHSUNDEEP
javascriptreactjsecmascript-6react-routerreact-router-dom
Nikita Lafinskiy
Nikita Lafinskiy

Reputation: 89

The error said that I forgot to export my component from the file it's defined in but I am not exporting any custom components(React)

The error message said that I exported something incorrectly so I tried writing everything in one file but it is still not working. The code:


import React, {BrowserRouter, Route, NavLink} from "react";
import ReactDOM from "react-dom";


function About(){
    return(
            <>
            <h1>About Page</h1>
            <NavLink to="/contact">Contact Us</NavLink>
        <NavLink to="/">Main</NavLink>
            </>
    )
}

function Contact(){
    return(
            <>
            <h1>Contact Us Page</h1>
            <NavLink to="/about">About</NavLink>
        <NavLink to="/">Main</NavLink>
            </>
    )
}

function Main(props){
    
    return(
        <>
        <NavLink to="/contact">Contact Us</NavLink>
        <NavLink to="/about">About</NavLink>
        </>
    )
}

function App(){
    return(
        <BrowserRouter>
            <Route exact path="/" component={Main}/>
            <Route exact path="/contact" component={Contact}/>
            <Route exact path="/about" component={About}/>
        </BrowserRouter>
     )
}


ReactDOM.render(<App/>, document.getElementById("root"));

The Error:

Error: 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.

Upvotes: 0

Views: 67

Answers (1)

Gurkan Ugurlu
Gurkan Ugurlu

Reputation: 467

I think you are importing files from wrong file. import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";

Upvotes: 2

Related Questions