当尝试路由到不同的屏幕时，我一直收到错误消息“在位置“/home”匹配的叶子路由没有元素或组件。这意味着它将默认渲染一个带有空值的，导致页面为空。”

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(
    

      
        
        
          } />
          } />
          } />
          } />
        
      
    
  )
}

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 (
    

      {/* Bottom Tab Navigator*/}
      
    
  )
};

export default Navigation;

我尝试了多种解决方案，但都没有成功。我有一种感觉，这与我混合使用了多个代码片段并试图将它们组合在一起有关。