当尝试路由到不同的屏幕时,我一直收到错误消息“在位置“/home”匹配的叶子路由没有元素或组件。这意味着它将默认渲染一个带有空值的<Outlet />
,导致页面为空。”
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,用于在屏幕之间进行路由的底部选项卡导航
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;
我尝试了多种解决方案,但都没有成功。我有一种感觉,这与我混合使用了多个代码片段并试图将它们组合在一起有关。
react-router@6的Route组件使用一个element属性,接受一个ReactNode(例如JSX)或Component属性,接受一个React Element。
查看Route的element/Component。
或者
换句话说,不要使用上面的第二个示例,因为它是一种非优化的方法。