在react-router配置應用的基本名稱

我正在爲react-router 2.x配置，特別是應用基本名稱而苦苦掙扎。在react-router配置應用的基本名稱

我有一個應用程序可能在整個生命週期中有不同的基礎根。例如：

/發展
生產/users
/account後遷移

基名進場的幾個地方：

靜態資產編譯在Webpack
反應路由器主要配置
指定在終極版動作
提供類似redirectUrl到API重定向路由呼叫

我目前的解決方案是有一個ENV變量，並將其提供既的WebPack和該應用程序本身通過Express服務器注入window.defs，但我仍然在整個應用程序的太多地方產生類似${defs.APP_BASENAME}/signin的內容。

我該如何抽象出應用程序庫，或者至少將它放在一個位置？我應該能夠在Router的配置中指定基本路由，然後以某種方式簡單地使用相對路由，對吧？或者我錯過了什麼？

謝謝！

來源

2017-01-03 Ilya Ayzenshtok

您可以用basename裝飾您的history。您可以在Webpack配置中將其與DefinePlugin混合使用以指定應使用哪個基本名稱。

// webpack.config.js 
new Webpack.DefinePlugin({ 
    BASENAME: '/users' 
}) 

// somewhere in your application 
import { useRouterHistory } from 'react-router' 
import { createHistory } from 'history' 

const history = useRouterHistory(createHistory)({ 
    basename: BASENAME 
})

鑑於基本名稱：/users，陣營路由器會忽略/users在路徑所以開頭：

的URL /users內部通過路徑匹配/
的網址/users/profile匹配路徑/profile。

同樣，當您在應用程序中進行導航時，不必將基本名追加到路徑中。

<Link to='/friends'>Friends</Link>將導航到/friends內部，但在位置欄中的URL將/users/friends。在我的本地我讓nginx的服務的東西，在根上下文，但我的督促服務器，Apache的一個子目錄的服務於東西...：今天

來源

2017-01-03 18:32:36

這仍然有反應，路由器和歷史V3的作品。 –

我碰到了同樣的問題

靈感來自保羅S上的答案和啓發，這裏的相關信息： https://github.com/ReactTraining/react-router/issues/353

我得到了我工作的解決方案：

中的WebPack配置文件中我定義了一個插件，我的本地dev的ENV ：

plugins: [ 
    new webpack.DefinePlugin({ 
     BASENAME: JSON.stringify("/") 
    }) 
    ],

中的WebPack PROD配置文件

我在子文件夾中定義的插件我的督促ENV，即www.example.com/users：

plugins: [ 
    new webpack.DefinePlugin({ 
     BASENAME: JSON.stringify("https://stackoverflow.com/users/") 
    }),

和我的反應路由器的定義，我只是引用：

import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 
import { useBasename } from 'history' 
... 
<Router history={useBasename(() => browserHistory)({ basename: BASENAME })}>

對我來說是非常優雅的解決方案和一件容易的事......它只是花了我大約五小時左右看看:-)

親切的問候戴維

來源

2017-03-16 04:37:59 davey

在react-router配置應用的基本名稱

回答

相關問題