react-router/redux-simple路由器加載深度路由

我正在努力使用react-router（與redux-simple-router，fwiw）應該是一件簡單的事情。react-router/redux-simple路由器加載深度路由

我有一些基本的路由定義像這樣：

<Route path="/" component={AppRoot}> 
     <Route path="all" component={ScheduledReportList} mine={false}/> 
     <Route path="mine" component={ScheduledReportList} mine={true}/> 
     <Route path="report/:name" component={ScheduledReportList} mine={false}/> 
</Route>

ScheduledReportList的瑞德納方法來處理mine參數的設施，和邏輯來處理name支柱的存在（或缺乏）（剪切不相關的部分）。

render() { 
     const { name } = this.props.params; 
     if (name != undefined && name != null) { 
      // we are displaying details for a single report only 
      let values = getScheduledReports(); 
      let currentReport = _.find(values, (report) => { 
       return report.name == name; 
      }); 
      if (this.props.route.mine) { 
       return (
        <MyReportDetails... /> 
       ); 
      } else { 
       return (
        <ReportDetails... /> 
       ); 
      } 
     } else { 
      // we are displaying all reports 
      <snip...> 
       values.map((report, i) => { 
        let anchor = undefined; 
        if (this.props.route.mine) { 
         anchor = <a onClick={() => {this.props.routeActions.replace('/myreport/' + report.name)}}>{report.name}</a> 
        } else { 
         anchor = <a onClick={() => {this.props.routeActions.replace('/report/' + report.name)}}>{report.name}</a> 
        } 
        <snip...>

我的問題是這樣的：客戶端我可以很好地導航。使用稱爲routeActions.replace()或routeActions.push()的錨點或跨度，那麼一切都很好。這個問題特別是當我處於「深度」路徑（即，其中有一個斜線：/reports/fooReport與/all），我刷新頁面，或者如果我嘗試直接導航到它。試圖加載/reports/foo頁面服務器端給我一個SyntaxError: expected expression, got '<'錯誤，就好像它不期望加載webpack js的index.html。我可以導航到/我很好，這是沒有道理的。

我錯過了什麼簡單的事情，以獲得這對直接和間接導航工作？謝謝！

來源

2016-01-20 snowell

看看你的開發工具的網絡面板。哪個請求出錯？我的猜測是，您正在從不匹配的頁面提供index.html，並且index.html具有一個腳本標記，其中包含由webpack生成的包的相對url。你的index.html是什麼樣的？ – ibash

那麼，看一些調試日誌確實揭示了一些：App：Server/report/SomeReport + 0ms App：Server /report/report-server-react.js + 0ms所以我修復了index.html中的相對路徑，它得到了這個錯誤消失，但通過REDX狀態似乎並沒有傳播到現在的深層頁面... – snowell

你使用瀏覽器歷史API？ https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#browserhistory – ibash

嗯，我終於明白了，這與我一直在想的事情很少有關。原來我的getScheduledReports（）方法是假設redux狀態將被填充，並且在導航到報告時/不管它是否馬上。

爲redux存儲中的狀態對象添加null/undefined檢查，當它不存在時返回null爲我修復它。一旦商店填充和報告可用，我的組件看到它並刷新。

來源

2016-01-20 17:39:48 snowell

您可以在react-router這樣做深路由：

<Route path="/" component={Layout} > 
    <IndexRoute component={Homepage} /> 
    <Route path="home" component={Homepage} /> 
    <Route path="bayaans" component={Bayaans} /> 
    <Route path="read-quran" component={Readquran} /> 
    <Route path="duas" component={Duas} /> 
    <Route path="events" component={Events} /> 
    <Route path="contact" component={Contactpage} /> 
</Route> 

<Route path="/admin" component={AdminLayout} > 
    <IndexRoute component={LoginPg} /> 
    <Route path="dashboard" component={Dashboard} /> 
    <Route path="list-bayaans" component={AdminBayaansPg} /> 
    <Route path="list-duas" component={AdminDuasPg} /> 
    <Route path="list-events" component={AdminEventsPg} /> 
</Route>

來源

2016-12-01 10:46:39

react-router/redux-simple路由器加載深度路由

回答

相關問題