反應：如何處理語言選擇的路由

反應在這裏初學者。我想在我的新網站中實現語言選擇。用戶可以從下拉菜單中選擇一個特定的國家。根據所選語言，URL應更新爲/:country/about，整個頁面的內容應相應更新。反應：如何處理語言選擇的路由

關閉我的頭腦，我可以嘗試以下選項之一。

在most parent app component state這時候的變化，重新呈現整個應用程序（所有兒童）使用新的語言和設置定義語言。
使用location.href加載包含國家/地區代碼的新URL，該國家/地區代碼將使用新語言和設置實施全面加載。

index.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') 
);

的index.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>

請注意，使用新的網址時，所有圖片的路徑都會隨之更改。例如，指向assets/img/image.jpg的網址將在網址更改時中斷。

Current: http://localhost:8080/assets/images/main-logo.png 
New: http://localhost:8080/us/assets/images/main-logo.png

我不知道下一步該怎麼做。處理這個問題的最好方法是什麼？

來源

2017-07-09 anonym

呃，爲什麼，而不是代替發送國爲路由器參數，將其作爲查詢參數發送。我的意思是代替'「/：country/about」'，將它保留爲「/ about」，併發送給'「/ about /？country = en」'。這樣，指向圖像的URL不會被破壞。 –

這是個好主意。謝謝。 – anonym

將圖像網址更改爲以'/ assets/img/image.jpg'之類的斜線開頭並且指向'http：// localhost：8080/assets/img/image.jpg'的適當的URL就足夠了 –

這是不夠，你改變圖像的URL，以適當的人開始以斜線狀

/assets/img/image.jpg

，他們將指向

http://localhost:8080/assets/img/image.jpg

來源

2017-07-09 10:47:22

反應：如何處理語言選擇的路由

回答

相關問題