在这里反应初学者。我想在我的新网站中实现语言选择。用户可以从下拉菜单中选择特定国家/地区。根据所选语言，URL 应/:country/about更新，整个页面的内容应相应更新。
在我的脑海中，我可以尝试以下选项之一。
-
在
most parent app component state中定义语言，当更改时，使用新的语言和设置重新呈现整个应用(所有子应用(。
使用 location.href加载包含国家/地区代码的新 URL，这将使用新语言和设置实现完全重新加载。
索引.js
ReactDOM.render
(
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route path="/:country/about" component={AboutPage} />
<Route path="/:country" component={HomePage} />
<Route path="/" component={HomePage} />
</Switch>
</BrowserRouter>
</Provider>,
document.getElementById('app')
);
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Site Title</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="app"></div>
<script src="assets/js/scripts.js"></script>
<script src="/bundle.js"></script>
</body>
</html>
导航链接
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/:country/all-restaurants">All Restaurants</Link>
</li>
<li>
<Link to="/:country/how-it-works">How It Works</Link>
</li>
<li>
<Link to="/:country/about">About Us</Link>
</li>
<li>
<Link to="/:country/restaurant">Lallo Pizzeria</Link>
</li>
请注意，使用新 url，所有图像的路径都会随之更改。例如，指向assets/img/image.jpg的网址将随着网址的变化而断开。
Current: http://localhost:8080/assets/images/main-logo.png
New: http://localhost:8080/us/assets/images/main-logo.png
我不知道下一步该怎么做。处理此问题的最佳方法是什么？
将图像 URL 更改为以斜杠开头的正确 URL 就足够了，例如
/assets/img/image.jpg
他们会指向
http://localhost:8080/assets/img/image.jpg