匹配的叶子路由位于位置 “/home”,但没有元素或组件。

huangapple go评论71阅读模式
英文:

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 &lt;Outlet /&gt; with a null value by default resulting in an "empty" page." when attempting to route to different screens.
App.js

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

function App() {
  return(
    &lt;div className=&quot;App&quot;&gt;
      &lt;Router&gt;
        &lt;Navigation/&gt;
        &lt;Routes&gt;
          &lt;Route exact path=&quot;/home&quot; component={&lt;Home /&gt;} /&gt;
          &lt;Route path=&quot;/sleep&quot; component={&lt;Sleep /&gt;} /&gt;
          &lt;Route path=&quot;/brew&quot; component={&lt;Brew /&gt;} /&gt;
          &lt;Route path=&quot;/steam&quot; component={&lt;Steam /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/Router&gt;
    &lt;/div&gt;
  )
}

export default App;

Navigation.js, Bottom tab navigation used to route between screens


    

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

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

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

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@6Route 组件使用一个 element 属性,接受一个 ReactNode(例如 JSX)或 Component 属性,接受一个 React Element

请参阅 Routeelement/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.

&lt;Router&gt;
  &lt;Navigation /&gt;
  &lt;Routes&gt;
    &lt;Route path=&quot;/home&quot; element={&lt;Home /&gt;}/&gt;
    &lt;Route path=&quot;/sleep&quot; element={&lt;Sleep /&gt;} /&gt;
    &lt;Route path=&quot;/brew&quot; element={&lt;Brew /&gt;} /&gt;
    &lt;Route path=&quot;/steam&quot; element={&lt;Steam /&gt;}/&gt;
  &lt;/Routes&gt;
&lt;/Router&gt;

or

&lt;Router&gt;
  &lt;Navigation /&gt;
  &lt;Routes&gt;
    &lt;Route path=&quot;/home&quot; Component={Home}/&gt;
    &lt;Route path=&quot;/sleep&quot; Component={Sleep} /&gt;
    &lt;Route path=&quot;/brew&quot; Component={Brew} /&gt;
    &lt;Route path=&quot;/steam&quot; Component={Steam}/&gt;
  &lt;/Routes&gt;
&lt;/Router&gt;

> ## Important
>
> You should only opt into the Component API for data routes via
> RouterProvider. Using this API on a &lt;Route&gt; inside &lt;Routes&gt; 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.

huangapple
  • 本文由 发表于 2023年7月18日 01:05:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76706671.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定