La route feuille ne correspond à aucun élément ou composant à l'emplacement "/home"

Question

Lorsque j'essaie d'effectuer un itinéraire vers un autre écran, j'obtiens toujours l'erreur "La route feuille correspondante à l'emplacement "/home" n'a aucun élément ou composant. Cela signifie qu'il en affichera un avec une valeur nulle par défaut <Outlet />, ce qui entraînera la page sois vide. »

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import React from "react";
import Home from './Screens/Home';
import Sleep from './Screens/Sleep';
import Brew from './Screens/Brew';
import Navigation from './Navigation';
import Steam from './Screens/Steam';

function App() {
  return(
    <div className="App">
      <Router>
        <Navigation/>
        <Routes>
          <Route exact path="/home" component={<Home />} />
          <Route path="/sleep" component={<Sleep />} />
          <Route path="/brew" component={<Brew />} />
          <Route path="/steam" component={<Steam />} />
        </Routes>
      </Router>
    </div>
  )
}

export default App;

Navigation.js, onglet de navigation inférieur pour le routage entre les écrans

import React from 'react';
import { Nav, NavItem } from 'reactstrap'
import { NavLink } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch, faHome, faUserCircle } from '@fortawesome/free-solid-svg-icons';

const tabs = [{
  route: "/home",
  icon: faHome,
  label: "Home"
},{
  route: "/sleep",
  icon: faSearch,
  label: "Sleep"
},{
  route: "/brew",
  icon: faUserCircle,
  label: "Brew"
},{
  route: "/steam",
  icon: faUserCircle,
  label: "Steam"
}]

const Navigation = (props) => {
  return (
    <div>
      {/* Bottom Tab Navigator*/}
      <nav className="navbar fixed-bottom navbar-light" role="navigation">
        <Nav className="w-100">
          <div className=" d-flex flex-row justify-content-around w-100">
            {tabs.map((tab, index) => (
              <NavItem key={`tab-${index}`}>
                <NavLink to={tab.route} className="nav-link bottom-nav-link" activeClassName="active">
                  <div className="row d-flex flex-column justify-content-center align-items-center">
                    <FontAwesomeIcon size="lg" icon={tab.icon} />
                    <div className="bottom-tab-label">{tab.label}</div>
                  </div>
                </NavLink>
              </NavItem>
            ))}
          </div>
        </Nav>
      </nav>
    </div>
  )
};

export default Navigation;

J'ai essayé plusieurs solutions mais aucune n'a fonctionné. J'ai le sentiment que cela a quelque chose à voir avec le fait que je mélange plusieurs extraits de code et que j'essaie de les assembler.

Answer 1

Le composant Route de réagir-router@6 utilise un attribut d'élément, qui accepte un ReactNode (tel que JSX) ou l'attribut Component, qui accepte un élément React.

Afficher l'élément/composant de l'itinéraire.

<Router>
  <Navigation />
  <Routes>
    <Route path="/home" element={<Home />}/>
    <Route path="/sleep" element={<Sleep />} />
    <Route path="/brew" element={<Brew />} />
    <Route path="/steam" element={<Steam />}/>
  </Routes>
</Router>

ou

<Router>
  <Navigation />
  <Routes>
    <Route path="/home" Component={Home}/>
    <Route path="/sleep" Component={Sleep} />
    <Route path="/brew" Component={Brew} />
    <Route path="/steam" Component={Steam}/>
  </Routes>
</Router>

En d’autres termes, n’utilisez pas le deuxième exemple ci-dessus car il s’agit d’une approche non optimisée.