使用 Route | 获取空白页反应答案

【问题标题】：Getting blank page on using Route | React使用 Route | 获取空白页反应
【发布时间】：2022-12-14 20:19:03
【问题描述】：

伙计们！

向我的应用程序添加简单的 /home 路由时遇到了一些麻烦。当我将下面的行添加到我的 App.js 时，应用程序变为空白（甚至 NavBar 消失）：

        <Route path='/home' exact component={HomeScreen} />

没有编译或服务器错误。

你能给我一盏灯吗？

应用程序.js

import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
import { BrowserRouter, Route } from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar/>
      <BrowserRouter>
        <Route path='/home' exact component={HomeScreen} />
      </BrowserRouter>
    </div>
  );
}

export default App;

HomeScreen.js

import React from 'react';

function HomeScreen() {
  return (
      <div>
        <h1>asdasdHome Screen</h1>
      </div>
  )
}

export default HomeScreen

树

tree

【问题讨论】：

标签： reactjs

【解决方案1】：

import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
mport { BrowserRouter, Routes, Route} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar/>
      <BrowserRouter>
         <Routes>
           <Route path='/home' element={<HomeScreen/>} />
         </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

不起作用的地方是你定义元素的地方所以改变

 <Route path='/home' exact component={HomeScreen} />

对此

 <Route path='/home' element={<HomeScreen/>} />

【讨论】：

得到这个：在'react-router-dom'中找不到导出'Switch'（导入为'Switch'）（可能的导出：BrowserRouter，HashRouter，Link，MemoryRouter，NavLink，Navigate，Outlet，Route，Router，Routes，UNSAFE_LocationContext ，UNSAFE_NavigationContext，UNSAFE_RouteContext，createRoutesFromChildren，createSearchParams，generatePath，matchPath，matchRoutes，renderMatches，resolvePath，unstable_HistoryRouter，useHref，useInRouterContext，useLinkClickHandler，useLocation，useMatch，useNavigate，useNavigationType，useOutlet，useOutletContext，useRosolvedParams，useResolvedParams，useResolved
@Diego 在你的 package.json 中请确认你使用的是哪个版本的 react-router-dom
在其他帖子 (stackoverflow.com/questions/63124161/…) 上，他们说它已被“路线”取代。使用“路线”不再给我空白页，但不会呈现主屏幕元素。
"react-dom": "^17.0.2", "react-router-dom": "^6.2.1",
@Diego 抱歉刚刚更新了我对新版本的 react-router-dom 的回答。与 S.marx 的回答相同

【解决方案2】：

嘿迭戈现在有反应路由器v6

在哪里转变被替换为航线和component={HomeScreen}为element={<HomeScreen/>}

import './App.css';
import Navbar from './components/Navbar';
import HomeScreen from './screens/HomeScreen'
import { BrowserRouter, Routes, Route} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Navbar/>
      <BrowserRouter>
         <Routes>
           <Route path='/home' element={<HomeScreen/>} />
         </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

【讨论】：

解决了！ Tyvm =)

【解决方案3】：

我想你在 Navbar 中使用了链接。导航栏在浏览器路由器之外。这是我的问题。

【讨论】：