reactv6版本的路由跳转之后之前的内容还有怎么解决

这篇文章主要介绍了React-Router6版本更新引起的路由变化怎么用的相关知识，内容详细易懂， *** 作简单快捷，具有一定借鉴价值，相信大家阅读完这篇React-Router6版本更新引起的路由变化怎么用文章都会有所收获，下面我们一起来看看吧。

React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有452k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，就在上个月，更是迎来了一个大的正式版更新6x，当前最新为602，相对比于之前的5x版本做出了较大改变，不管从用法还是从性能上都有了明显的提升，本文也将用新老版本对比的方式让你能以最快的速度上手新用法

话不多说，先列出60做出的改变之处：

用法变化

替换为

嵌套路由新写法

推出全新hook，全面拥抱函数组件

基于对象的路由，实现js配置所有路由

整体代码比上个版本减小大约70%

用法变化

组件变化较大，移除了component与render属性，使用element属性替代，因为与之前的版本代码写法不能兼容，写法区别如下

// 5x用法

<Route path="/home" component={Home} />

<Route path="/login" render={()=><Login/>}/>

// 6x用法

<Route path="/home" element={<Home/>} />

<Route path="/login" component={<Login/>} />

替换为

v6版本移除了 组件，并使用替换，除了能替代 组件的功能外，也做了一些改变，比如所有的都必须包裹在中,否则抛出错误

// 5x用法

<Switch>

<Route path="/home" component={Home} />

<Route path="/login" component={Login} />

</Switch>

// 6x用法

<Routes>

<Route path="/home" element={<Home/>} />

<Route path="/login" component={<Login/>} />

</Routes>

嵌套路由

v6版本的react-router支持多种嵌套路由写法，写法分别如下：

第一种写法：延续v5版本写法，保持原有组件结构 这种写法比较适合重构的项目，不需要改变太多的代码便能过渡到v6版本

// Appjsx

<Routes>

<Route path="/home" element={<Home/>} />

<Route path="/user/" element={<User/>} />

</Routes>

// Userjsx

<Routes>

<Route path="profile" element={<UserProfile/>} />

<Route path=":/id" element={<UserDetail/>} />

</Routes>

虽然组件结构与v5版本一至，但写法上有一定的差异，父组件Appjsx中的path属性最后必须使用星号(path="/user/")，子组件Userjsx中的路径都是相对于其父级路径，所以不需要像v5版本那样写全整个路径，妈妈再也不用担心我会写错地址。

另外，如果中的path属性不以/开头，则是相对于其父级路径，这样的好处是使嵌套路由实现变得更加简单，并易于组合复杂的路由和布局

第二种写法：把所有的写在一起，配合实现路由组件的显示

// Appjsx

<Routes>

<Route path="/home" element={<Home/>} />

<Route path="/user" element={<User/>}>

<Route path="profile" element={<UserProfile/>} />

<Route path=":/id" element={<UserDetail/>} />

</Route>

</Routes>

// Userjsx

<Outlet/>

这样写法让我们能更清晰地去了解路由结构，能更好地管理我们的路由，而能让我们能更精确地把嵌套的路由组件布局到需要位置显示

第三种写法：使用useRoutes()实现路由配置

使用useRoutes配置路由与配置路由效果一致，只是这种写法使用javascript生成路由，不依赖JSX，返回相应结构的路由组件树，有木有感觉回到了VueRouter？有木有？

function App(){

// 以下写法与第二种写法效果一至

const element = useRoutes([

{path:'/home',element:<Home/>},

{

path:'/user',

element:<User/>,

children:[

{path:'profile',element:<UserProfile/>},

{path:':/id',element:<UserDetail/>},

]

}

])

return element

}

以上三种写法各有各的优点，开发者可以根据自身的需求选择一种来实现你的嵌套路由

重定向

新版本的react-router移除了组件，但可以使用新增的组件配合组件实现重定向效果

<Routes>

<Route path="/home" element={<Home/>} />

<Route path="/" element={<Navigate to="/home"/>}>

</Routes>

路由跳转

路由配置好后免不了要进行页面跳转，但新版的react-router移除了history对象，故不能使用v5版本的history（包括useHistory hook）已不能使用，我们可以使用以下两中方式进行跳转

使用或进行跳转这种方式与上一个版本几乎没有太大的区别，唯一的区别是组件的高亮写法发生了变化

// v5版本

<NavLink to="/home" activeStyle={{color:'#f00'}}>首页</NavLink>

<NavLink to="/home" activeClassName="active">首页</NavLink>

// v6版本

<NavLink to="/home" style={({isActive})=>(isActive{color:'#f00'}:{})}>首页</NavLink>

<NavLink to="/home" className={({isActive})=>isActive'current':''}>首页</NavLink>

PS: 默认已经有一个高亮的active类，可以直接使用，不需要额外设置

使用useNavigate()进行跳转有时候我们并不能使用以上两个组件进行跳转，如根据ajax请求返回值跳转不同的页面，这时我们就得使用js的方式时行跳转了，虽然新版的react-router已经移除掉history对象，但给我们提供了 useNavigate hook实现路由跳转，使用方法如下

import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

navigate(`/home`);

// 跳转且不保留浏览记录

navigate(`/home`,{replace:true});

// 返回上一页

navigate(-1)

// 对象方式跳转

navigate({

pathname:'/home'

})

需要注意一点就是，在v6版本的react-router中，如果跳转的路径如果不是以/开头，则为相对路径，相对于其父级路由路径，这样的设置能让我们更好的控制跳转

路由传参

我们都知道，在进行路由跳转时，可以附带一些参数一起传递到跳转页面，新版的react-router已经从props中移除了history、location、match，也移除掉了withRouter高阶组件，所以无法使用老版本的方式传参与接收，新版用法如下

search传参

let navigate = useNavigate();

navigate(`/homepage=1&size=10`);

navigate({

pathname:'/home',

search:'page=1&size=10'

});

在对应组件接收参数也很简单，使用useSearchParams hook进行接收，得到URLSearchParams对象以及设置search参数函数组成的数据

function Home(){

const [searchParams,setSearchParams] = useSearchParams()

searchParamsget('page');//1

searchParamsget('size');//10

return (

<div>首页</div>

)

}

动态路由传参

<Route path="/user" element={<User/>}>

<Route path=":/id" element={<UserDetail/>} />

</Route>

配置完以上路由后，当页面跳转到/user/123这个路径时，可以在组件中使用useParams hook获取123这个id

function UserDetail(){

const {id} = useParams()

return (

<div>id:{id}</div>

)

}

state传参通过、或 useNavigate进行跳转时，都可以传递state参数，用法如下:

<Link to="/home" state={{idx:1,key:'qf'}}>首页</Link>

navigate('/home',{state:{idx:1,key:'qf'}})

在首页组件中通过useLocation hook获取state值

function Home(){

const {state} = useLocation();

stateidx; // 1

statekey; // qf

return (

<div>首页</div>

)

}

react router清除历史记录,首先回到之前的页面,Component会重新render数据初始化。 也可以通过设置cookie或者用store来存储之前的信息，写个全局变量用来 store,getInitState 时会先从里面找，comentDidMount 时，再 调用 ajax 把服务端

1获取dom元素

2dom元素的属性

3获取元素到页面顶部的距离，原生js只能获取相对于父级的top值，所以需要递归获取offsetParent，直到最外层

4滑动动画

5浏览器滑动无效？兼容所有浏览器设置scrollTop的方法：

以上就是关于reactv6版本的路由跳转之后之前的内容还有怎么解决全部的内容，包括:reactv6版本的路由跳转之后之前的内容还有怎么解决、react-router 引入hashHistory 为何为undefined、React中ref获取元素位置，并通过js滑动到对应位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！