2016-11-01 78 views
0

我對路線註冊下面的代碼在我的小學(main.tsx)入口點:陣營,路由器不會尊重深層鏈接

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 
import { browserHistory, IndexRoute, Route, Router } from "react-router"; 

import { About } from "../about/about"; 
import { Home } from "../home/home"; 

ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={Home}> 
     </Route> 
     <Route path="/about/:id" component={About}> 
     </Route> 
    </Router>, 
    document.getElementById("main") 
); 

我也有進入,輸出下面的代碼, devServer在我webpack.config.js文件:

module.exports = { 
    entry: { 
     main: "./wwwroot/common/main.tsx", // Starting point of linking/compiling Typescript and dependencies, will need to add separate entry points in case of not deving SPA 
     common: [ "q", "react", "react-dom", "react-router" ] // All of the "chunks" to extract and place in common file for faster loading of common libraries between pages 
    }, 
    output: { 
     path: "./dist/", // Where we want to host files in local file directory structure 
     publicPath: "/", // Where we want files to appear in hosting (eventual resolution to: https://localhost:4444/) 
     filename: "[name].js", // What we want end compiled app JS file to be called 
    }, 

    devServer: { 
     contentBase: "./dist", // Copy and serve files from dist folder 
     port: 4444, // Host on localhost port 4444 
     https: true, // Enable self-signed https/ssl cert debugging 
     colors: true, // Enable color-coding for debugging (VS Code does not currently emit colors, so none will be present there) 
     historyApiFallback: { 
      index: "index.html" 
     } 
    }, 

每當我試圖訪問/約/ uniqueGuidHere直接或通過刷新,所有我收到的404(所有圖片文件以及輸出的常見的。 js文件和main.js文件)。其他.tsx文件中不存在其他.tsx文件,其中有我擁有鏈接的鏈接(在它們的最後鏈接爲guid)。我錯過了什麼嗎?是否需要其他東西來允許與反應路由器進行深度鏈接?

+0

作爲一個供參考「的index.html」,在目錄「./wwwroot/」的存在 –

回答

0

對於那些也遇到過這個問題的我,我找到了一個解決方案(至少對我的問題)。原來index.html文件有相對路徑(與深度路徑相反)。

例如,通過將「main.js」的「script src」從「./main.js」更改爲「/main.js」,它開始工作(正在使用webpack-dev-server進行服務)。

來源的進一步閱讀可以在這裏找到:https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls