反应路由器切换基本名称答案

【问题标题】：React Router Toggle Basename反应路由器切换基本名称
【发布时间】：2021-06-18 15:18:44
【问题描述】：

我有一个<BrowserRouter><App></BrowserRouter>，并且正在使用“上下文”管理当前语言。

我想做的是在语言更改时切换 URL（更改内容没有问题）。默认网址为site.com/...，英文版为site.com/en/...。

我一直在搜索太多，似乎无法找到正确的方法。

【问题讨论】：

标签： reactjs react-router browser-history

【解决方案1】：

我会假设你有这样的 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);
   }
   ....
}

【讨论】：

可能我们想调用history.push()，路径的其余部分与当前 URL 一样，只是语言发生了变化。