Maison > Questions et réponses > le corps du texte
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.
P粉0109671362023-09-16 10:36:57
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.