reactjs - react-router v5 BrowserRouter 基本名称更改，但 url 没有

Question

function App() {
   return (
         <main>
            <Switch>
               <Route path={`/:lng(en)?/blog/:slug`} component={BlogPost} />
               <Route path={`/:lng(en)?/blog`} component={Blog} />
               <Route path={`/:lng(en)?/gallery`} component={Gallery} />
               <Route exact path={`/:lng(en)?`} component={Home} />
            </Switch>
         </main>
   );
}

function MyRouter(props) {
   const { lang, setLang } = useContext(LanguageContext);
   return <BrowserRouter basename={lang}>{props.children}</BrowserRouter>;
}

ReactDOM.render(
   <LanguageProvider>
      <MyRouter>
            <App />
      </MyRouter>
   </LanguageProvider>,
   document.getElementById("root"),
);

这是我的index.jsx文件，它正在工作。我在这里遇到的问题是根据上下文BrowserRouter的basename变化，但它不影响 URL。

例如，第一个地址是site.com/base/some-page。使用上下文，lang正确更改的值，“react DevTools”表示basename值BrowserRouter也发生了变化。现在，当我导航时，地址应该是site.com/new-base/another-page；但它仍然存在site.com/base/another-page，并且 URL 没有改变。

我应该怎么办？

标签： reactjsreact-router