我是 React 的初學者，在練習 Router 時，我發現它沒有回傳相關組件。下面是代碼。ps BrowserRouter 作業正常是 Hello world 已經呈現。
import React, {Component} from 'react';
import {Route, BrowserRouter} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';
class App extends Component {
render(){
return (
<BrowserRouter>
<div> Hello world</div>
<Route exact path="/" component={MainPage}/>
<Route path="about" component={About}/>
</BrowserRouter>
);
}
}
export default App;
uj5u.com熱心網友回復：
對于反應路由器 dom 6，它應該是元素：
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
// import your route components too
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
來源： https : //reactrouter.com/docs/en/v6/getting-started/overview
uj5u.com熱心網友回復：
您需要Route用Routesor包裹Switch（取決于您使用的是哪個版本的 react-router-dom）
import React, {Component} from 'react';
import {Route, BrowserRouter} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';
class App extends Component {
render(){
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/about" component={About}/>
</Switch>
</BrowserRouter>
);
}
}
export default App;
確保也匯入它！
uj5u.com熱心網友回復：
/在about路由之前添加并添加Switch或Routes（根據安裝的版本）到它
配置反應路由器
import React, {Component} from 'react';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';
class App extends Component {
render(){
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/about" component={About}/>
<Switch>
</BrowserRouter>
);
}
}
export default App;
uj5u.com熱心網友回復：
我建議您在 def 之后附加組件。最后一條路線。
像這樣...
<Route path="about" component={About}/>
<Outlet/>
uj5u.com熱心網友回復：
如果你使用 react-router-dom^6
import {Route, BrowserRouter, Routes} from 'react-router-dom';
<BrowserRouter>
<div> Hello world</div>
<Routes>
<Route exact path="/" element={<MainPage />} />
<Route exact path="/about" element={<About />} />
</Routes>
</BrowserRouter>
或者你使用 react-router-dom^5
import {Route, BrowserRouter, Switch} from 'react-router-dom';
<BrowserRouter>
<div> Hello world</div>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/about" component={About}/>
</Switch>
</BrowserRouter>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399035.html
標籤：javascript 反应