react基于router的语言切换

513 阅读1分钟

这个问题纠结了比较久,因为要上班。。。 总结一下:

背景: 我想在url中设置当前网页的语言类型,像这样:http://localhost:8000/zh_CN http://localhost:8000/zh_CN/other/paths 同时能够通过点击按钮实现切换 当前语言,语言变量应始终保留在URL中。

当前环境: "react": "^18.1.0", "react-router-dom": "^6.3.0",

看看我的路由配置:

image.png

1、<Route path=":lang/" element={<Language />}></Route> 主要是:lang/配置动态路由,就是语言路由 如zh_CN

2、<Route path="/" element={<RequireAuth><App /></RequireAuth>}> 其中RequireAuth对当前路由做了个捕捉,拦截,存在语言路由呢,就直接进去,否则在前面加上语言的路由,再重定向进去

3、app.tsx

image.png

4、language.tsx

image.png

5、点击按钮切换语言,还是在language.tsx里实现

image.png

想看源码的参考github.com/313258196/p…

终于解决了这个语言切换的问题,good~