如何使用react-router v4重定向到絕對路徑？

我有一個巨大的Django的web應用程序，用它的一個模塊（一個「儀表盤」），寫有節點和反應。用戶登錄由Django模塊處理。如何使用react-router v4重定向到絕對路徑？

用戶應登錄到主應用程序才能訪問儀表盤的反應，而這部分作品 - 代碼從瀏覽器獲取用戶會話，並只呈現的東西，如果有一個。

我現在想將用戶重定向到主應用程序的登錄頁面，如果沒有會話，但我不知道如何與我目前的結構（這血淋淋的V4路由器）做到這一點。

我使用的BrowserRouter分量的基本名稱使用相對於在Django應用程序儀表板路徑的路線。

這就是我想出的JSX爲app.jsx：

<BrowserRouter basename='/en/dashboard'> 
    {this.state.isAuthenticated ? (
     <Paper zDepth={0} style={{ height: '100%', backgroundColor: grey900 }}> 
      <div style={{height: '100%'}}> 
       <Header /> 
       <Switch> 
        <Route exact={true} path='/' component={FirstSection}/> 
        <Route path='/first' component={FirstSection}/> 
        <Route path='/second' component={SecondSection}/> 
       </Switch> 
      </div> 
     </Paper> 
    ) : (
     <Redirect to="/en/login"/> 
    )} 
</BrowserRouter>

但是，它實際上重定向到en/dashboard/en/login。我相信我可以從BrowserRouter中刪除'basename'屬性並將其添加到每個後續路由中，但是如果此模塊最終變得更大，則會使路由變得更加困難。有一個更好的方法嗎？

來源

2017-07-19 Clara Daia

不幸的是，這是不可能的。如果您使用的是基本名稱，則會在創建href之前將其添加到每個路徑的基礎中。這種情況發生在history模塊中createBrowserHistory在push和replace方法其中使用下面的函數：

var createHref = function createHref(location) { 
    return basename + (0, _PathUtils.createPath)(location); 
};

使用任一push或replace方法。

你可以找到下面的代碼塊中Redirect.prototype.perform方法：

if (push) { 
    history.push(to); 
} else { 
    history.replace(to); 
}

以上可以在Redirect.js的react-router模塊這是什麼react-router-dom模塊導入，然後出口找到。

要做你正在嘗試做的事情，我會讓basename成爲一個常量，並將它添加到每條路徑的路徑前面。

不幸的是<Route />或<Redirect />沒有ignoreBasename選項，雖然它是可以實現的。

來源

2017-07-19 18:19:09

在一個側面說明，我是能夠實現的一些補丁來'歷史/ createBrowserHistory.js'和'反應路由器/ Redirect.js'的ignoreBasename選項。這讓我感興趣，所以我正在考慮製作一個功能並請求將其添加到更高版本中。 –

有何新聞？該選項將非常有用。 –

我很抱歉，但我決定不再追求這一點。我正在爲React-Router的v4做這件事，'browserRouter'，它在＃19行上實例化歷史模塊。爲了避免'createBrowserHistory.js'行＃77產生的警告，您需要添加一個標誌createBrowserHistory.js，將其包含在browserRouter中，然後實現'ignoreBasename'功能，這並不困難，但是您會需要複製不同路由器類型的更改，並影響多個庫。我不覺得這個問題很普遍，不足以保證這些改變。 –

如何使用react-router v4重定向到絕對路徑？

回答

相關問題