react路由新寫法
最近使用react-router-dom發(fā)現(xiàn)Switch無法導(dǎo)入，報錯：
'Switch' is not exported from 'react-router-dom'
那是因為 react-router-dom v6版本換了名字瞄摊，
Switch 換成 Routes
Redirect 換成 useNavigate
在react-router-dom的最新版本中赂鲤，舊的寫法會報錯：
//錯誤的引用方式： 'Switch' is not exported from 'react-router-dom'
import { Switch, Route } from "react-router-dom";
//正確的引用方式
import { Routes ,Route } from 'react-router-dom';
在react官網(wǎng)中搜索路由，里面的示例寫法在v6版本中已經(jīng)不生效了棍掐。
下面是react官網(wǎng)路由的舊寫法：
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
? <Router>
? ? <Suspense fallback={<div>Loading...</div>}>
? ? ? <Switch>
? ? ? ? <Route exact path="/" component={Home}/>
? ? ? ? <Route path="/about" component={About}/>
? ? ? </Switch>
? ? </Suspense>
? </Router>
);
在react-router-dom的最新版本中藏雏，Route的component屬性也換成了element，element的屬性值要寫成 JSX組件的形式作煌，如：<Home/>
//新的正確寫法
import User from "./components/User";
<Route path="/user" element={<User/>}/>
如果 Route直接包含在非Routes的其他元素里诉稍，則還會報錯：
//錯誤的寫法：
ReactDOM.render(
? ? <Router>
? ? ? ? <>
? ? ? ? ? ? <Route path="/" element={<Home/>}/>
? ? ? ? ? ? <Route path="/user" element={<User/>}/>
? ? ? ? </>
? ? </Router>,
? ? document.getElementById('root')
);
報錯：
A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>
所以蝠嘉，Route 只能包在Routes中。
下面是react路由的react-router-dom的最新版本寫法的一個完整示例：
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Home from "./components/Home";
import User from "./components/User";
ReactDOM.render(
? ? <Router>
? ? ? ? <Routes>
? ? ? ? ? ? <Route path="/" element={<Home/>}/>
? ? ? ? ? ? <Route path="/user" element={<User/>}/>
? ? ? ? </Routes>
? ? </Router>,
? ? document.getElementById('root')
);
