Блог

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

 
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"));
 

Ошибка:

Ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: не определено. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или, возможно, перепутали импорт по умолчанию и именованный импорт.

Я думаю, что вы импортируете файлы из неправильного файла. import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";