如何解决反应路由器切换基本名称
我有一个 <BrowserRouter><App></BrowserRouter>
并且正在使用“上下文”管理当前语言。
我想要做的是在语言更改时切换 URL(更改内容没有问题)。
默认网址为 site.com/...
,英文版为 site.com/en/...
。
我搜索了太多,似乎无法找到正确的方法。
解决方法
我假设你有一个这样的 LanguageContext:
<BrowserRouter>
<LanguageProvider>
<App>
<LanguageProvider>
</BrowserRouter>
现在让我们构建 LanguageContext:
LanguageContext.js
const LanguageContext = React.createContext()
const LanguageProvider = ({children}) => {
const [language,setLanguage] = useState("en");
const history = useHistory();
const changeLanguage = (newLanguage) => {
setLanguage(newLanguage);
const location = {
pathname: `/${newLanguage}`,}
history.push(location)
}
return (
<Provider value={{changeLanguage}}>
{children}
</Provider>
)
}
export {LanguageContext,LanguageProvider}
现在当您想在 MyComponent.js
中使用它时const MyComponent = () => {
const {changeLanguage} = useContext(LanguageContext);
//let's say you handle a change through a select
const handleLanguageChange = (newLanguage) => {
changeLanguage(newLanguage);
}
....
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。