Как корректно работать с react router?

Question

[Fox 777]

Есть компонент Header

import React from 'react'
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

import './Header.scss'

import { Logo } from '../Logo'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBagShopping, faCircleUser } from '@fortawesome/free-solid-svg-icons'

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

import Service from '../../pages/Service'
import Contacts from '../../pages/Contacts'
import Login from '../../pages/Login'
import App from '../../App';

const Header = (props) => {
    return (
        <>
            <header>

                <Navbar fixed='top' className="bg-body-transparent">
                    <Container fluid >
                        <Navbar.Brand href="/App"><Logo fill='#222' /></Navbar.Brand>
                    </Container>
                    <Nav
                        className="fs-5"
                    >
                        <Nav.Link href="/service">Услуги</Nav.Link>
                        <Nav.Link href="/contacts">Контакты</Nav.Link>
                        <Nav.Link href="#"><FontAwesomeIcon icon={faBagShopping} /></Nav.Link>
                        <Nav.Link href="/login"><FontAwesomeIcon icon={faCircleUser} /></Nav.Link>

                    </Nav>
                </Navbar>
                <div className='Text'>
                    <div className="Title">
                        <h1>{props.title}</h1>
                    </div>
                    <div className="Description">
                        <p>{props.description}</p>
                    </div>
                </div>
            </header>
            <Router>
                <Routes>
                    <Route exact path='/App' element={App}/>
                    <Route exact path='/service' element={Service} />
                    <Route exact path='/contacts' Component={Contacts} />
                    <Route exact path='/login' Component={Login} />
                </Routes>
            </Router>
        </>
    )
}

export default Header

Везде одна и та же ошибка

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

При переходе по ссылкам, хрен знает что происходит.
Захожу на услуги, там же страница что и на App.jsx
Захожу в контакты вообще ничего просто белый экран и куча ошибок

Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
The above error occurred in the <Router> component

Делал всё по видеоуроку, не знаю, можно ли его сюда вставлять...

Answer 1

[Михаил Р.]

Вы создали не правильную структуру компонентов React Router. < Router> должен быть размещен в самом верху относительно вложенности всех компонентов, обычно это в районе < App>. Так же, для навигации Вы используете href, когда должны использовать компонент React Router - Link.

Это что такое?

<Route exact path='/contacts' Component={Contacts} />
// Component={Contacts} ???

Попробуйте так (если App является корневым компонентом):

import React from 'react';
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
import './App.scss';

import Header from './components/Header';
import Service from './pages/Service';
import Contacts from './pages/Contacts';
import Login from './pages/Login';
import Home from './pages/Home';

function App() {
  return (
    <Router>
      <div className="App">
        <Header />

        <nav>
          <Link to="/">Главная</Link>
          <Link to="/service">Услуги</Link>
          <Link to="/contacts">Контакты</Link>
          <Link to="/login">Вход</Link>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/service" element={<Service />} />
          <Route path="/contacts" element={<Contacts />} />
          <Route path="/login" element={<Login />} />

          <Route path="*" element={<NotFoundRoute/>} />
        </Routes>
      </div>
    </Router>
  );
}

// not fount route handler
function NotFoundRoute() {
  return <div>Page not found</div>;
}

export default App;

Header.js:

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

function Header(props) {
  return (
    <>
      <header>
        // ...

        <Link to="/service">Услуги</Link>
        <Link to="/contacts">Контакты</Link>

        // ...
      </header>
    </>
  )
}

export default Header;