<Route exact path="/"> <Home /> </Route> <Route path="/profile"> <Profile /> </Route> </Switch> </BrowserRouter> ); } 在React Router v6 版本里,直接使用Routes替代Switch: // v6 import { BrowserRouter, Routes, Route } from "react-router-dom"; function App() { return ( <Browse...
// v5 写法 // 引入 react-router import { Route, Switch } from 'react-router-dom'; function App() { return ( <Switch> <Route exact path='/home'> <Home /> </Route> </Switch> ); } // v6 写法 import { Route, Routes } from 'react-router-dom'; function App() { return ( <...
新钩子useRoutes代替react-router-config; 用useNavigate代替useHistory; Link不再支持component 属性; NavLink的exact属性替换为end 大小减少:从20kb到8kb <Switch>重命名为<Routes> 在V6版本中,<Switch>组件被替换成<Routes>组件,同时,component属性被element属性替换。 /* v5 */ <Switch> <Route exact path="/"...
<Route path='/home' element={<Home />} /> <Route path='/' element={<Navigate to='/about'/>}/> </Routes> 2.4<Link> 作用: 修改URL, 且不发送网络请求(路由链接). 注意: 外侧需要用<BrowserRouter>或<HashRouter>包裹 示例代码:
新钩子useRoutes代替react-router-config。 大小减少:从20kb到8kb 1.<Switch>重命名为<Routes> 该顶级组件将被重命名。但是,其功能大部分保持不变(嗨,瞎折腾)。 // v5 <Switch> <Route exact path="/"><Home /></Route> <Route path="/profile"><Profile /></Route> ...
原来是相互抗衡的,却没想React Router直接拿来合并(真香!) 目前v6已是测试最后一版,估计新的特性不出意外就是下面这些了。 <Switch>重命名为<Routes>。 <Route>的新特性变更。
新钩子useRoutes代替react-router-config 用useNavigate代替useHistory Link 不再支持 component 属性 NavLink 的 exact 属性替换为 end 大小减少:从20kb到8kb <Switch>重命名为<Routes> /* v5 */<Switch><Route exact path="/"component={Home}/><Route path="/user/:id"render={(routeProps)=><User id=...
新钩子useRoutes代替react-router-config。 大小减少:从20kb到8kb 1. <Switch>重命名为<Routes> 该顶级组件将被重命名。但是,其功能大部分保持不变(嗨,瞎折腾)。 复制 // v5<Switch><Routeexactpath="/"><Home/></Route><Routepath="/profile"><Profile/></Route></Switch>// v6<Routes><Routepath="...
React Router v6 引入了一个Routes的组件,类似于以前的Switch,但功能更强大。它包括相对路由和链接、自动路由排名、嵌套路由和布局等功能。// v5 <Switch> <Route exact path="/"><Home /></Route> <Route path="/profile"><Profile /></Route> </Switch> // v6 <Routes> <Route path="/" element=...
因为在新的架构中 ,Routes 充当了很重要的角色,在 react-router路由原理 文章中,曾介绍到 Switch 可以根据当前的路由 path ,匹配唯一的 Route 组件加以渲染。但是 Switch 本身是可以被丢弃不用的,但是在新版的路由中, Routes 充当了举足轻重的作用。比如在 v5 中可以不用 Switch 直接用 Route,但是在 v6 中使用...