When trying to route to a different screen, I keep getting the error message "The matching leaf route at location "/home" has no element or component. This means it will render one with a null value by default <Outlet />
, causing the page to be empty."
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, bottom tab navigation for routing between screens
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;
I have tried multiple solutions with no success. I have a feeling this has something to do with me mixing multiple code snippets and trying to fit them together.
react-router@6's Route component uses an element attribute and accepts a ReactNode (such as JSX) or Component attribute, which accepts a React Element.
View the element/Component of Route.
or
In other words, don't use the second example above as it is a non-optimized approach.