路由在 React.js 中返回白頁
[英]Routing returns white page in React.js
問題描述
我正在嘗試設置路由，但由於某種原因，它返回一個空白頁面並且不呈現任何內容。
我正在使用路由器版本 6.3.0
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter><App /></BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Route path="/landing">
<Landing />
</Route>
<Footer />
</Fragment>
);
}
}
export default App;
// --------------------------------------------- //
// Landing.js
import Body from './Body'
function Landing(props) {
return (
<Body>
<div className="Landing">
Landing Context
</div>
</Body>
)
}
export default Landing;
因此，當我訪問http://localhost:3000/landing ，沒有任何渲染，當我嘗試http://localhost:3000時，也沒有任何渲染。
如果我刪除 App.js 中的<Route></Route>部分，它會呈現，但在任何 URL 上。我錯過了什么？
4 個解決方案
解決方案1
1 2022-04-02 12:20:13
在 app.js 中，像這樣在路由器中包裝你的路線
import React, { Component, Fragment } from "react";
import { Router, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Router>
<Route path="/landing">
<Landing />
</Route>
</Router>
<Footer />
</Fragment>
);
}
}
export default App;
解決方案2
1 2022-04-02 12:42:42
react-router v6 有一些重大變化，它用 Routes 組件替換了 Switch：
/ index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter><App /></BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Routes>
<Route path="/landing" element={<Landing />}/>
</Routes>
<Footer />
</Fragment>
);
}
}
export default App;
解決方案3
1 已采納 2022-04-02 12:43:06
由於 OP 正在使用 react-router-dom v6
它期待元素道具來呈現組件，而不是孩子。
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes
解決方案4
0 2022-04-02 12:47:55
如果您使用的是 react-router 版本 < 6，那么您必須在 Route 元素上方添加從 react-router-dom 導入的 Switch 元素 -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Switch>
<Route path="/landing">
<div>On LAnding Page</div>
</Route>
</Switch>
</Fragment>
);
}
}
export default App;
如果您使用的是 react-router > 6，那么您必須將 Switch 替換為 Routes，並將要渲染的組件放置在 Route 的元素屬性中。 代碼應類似於以下 -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Routes } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Routes>
<Route path="/landing"
element={<div>On Landing Page</div>}>
</Route>
</Routes>
</Fragment>
);
}
}
export default App;
React.js動態路由刷新后出現空白頁面
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.