英文:
Matched leaf route at location "/home" does not have an element or Component
问题
我不会翻译代码部分,以下是翻译的文本内容:
"I keep getting the error 'Matched leaf route at location "/home" does not have an element or Component. This means it will render an <Outlet />
with a null value by default resulting in an "empty" page.' when attempting to route to different screens."
"Navigation.js,底部选项卡导航用于在屏幕之间进行路由"
"I have tried multiple solutions that I have found but none of them have worked yet. I have a feeling it has something to do with me mixing multiple code snippets I have found and attempting to put them together."
英文:
I keep getting the error "Matched leaf route at location "/home" does not have an element or Component. This means it will render an <Outlet />
with a null value by default resulting in an "empty" page." when attempting to route to different screens.
App.js
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 used to route 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 that I have found but none of them have worked yet. I have a feeling it has something to do with me mixing multiple code snippets I have found and attempting to put them together.
答案1
得分: 0
react-router@6
的 Route
组件使用一个 element
属性,接受一个 ReactNode
(例如 JSX)或 Component
属性,接受一个 React Element
。
请参阅 Route
的 element
/Component
。
<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>
或者
<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>
重要提示
仅在数据路由通过
RouterProvider
时才应选择Component
API。在Routes
内部的Route
上使用此 API 将会降低 React 重用已创建元素的能力。
换句话说,不要使用第二个示例,因为这会导致性能下降。
英文:
The react-router@6
Route
component uses an element
prop taking a ReactNode
(e.g. JSX) or Component
prop taking a React Element
.
See Route
element
/Component
.
<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>
or
<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>
> ## Important
>
> You should only opt into the Component
API for data routes via
> RouterProvider
. Using this API on a <Route>
inside <Routes>
will
> de-optimize React's ability to reuse the created element across
> renders.
So in other words, don't do the second example above since it is a de-optimization.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论