我正在嘗試設定路由，但由于某種原因，它回傳一個空白頁面并且什么也不呈現。
我正在使用路由器版本 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也不會呈現任何東西。
如果我洗掉<Route></Route>App.js 中的部分，它會呈現，但在任何 URL 上。我想念什么？
uj5u.com熱心網友回復：
由于 OP 正在使用 react-router-dom v6
它期望元素道具來呈現組件，而不是子級。
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes
uj5u.com熱心網友回復：
react-router v6 有一些重大變化，它將 Switch 替換為 Routes 組件：
/ 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;
https://reactrouter.com/docs/en/v6/getting-started/overview
uj5u.com熱心網友回復：
在 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;
uj5u.com熱心網友回復：
如果您使用的是 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 那么你必須用 Routes 替換 Switch 并將你想要渲染的組件放置在 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;
uj5u.com熱心網友回復：
試試這個代碼
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Routes>
<Route path="/landing" element={<Landing />}>
</Route>
</Routes>
<Footer />
</Fragment>
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/455455.html
標籤：javascript 反应
下一篇：為什么輸入未定義？