React-Router 不会尊重深层链接答案

【问题标题】：React-Router won't respect deep linksReact-Router 不会尊重深层链接
【发布时间】：2016-11-01 17:58:46
【问题描述】：

我的主要 (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")
);

我的 webpack.config.js 文件中还有以下用于入口、输出和 devServer 的代码：

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"
        }
    },

每当我尝试直接或通过刷新访问 /about/uniqueGuidHere 时，我收到的都是 404（对于所有图像文件以及输出的 common.js 文件和 main.js 文件）。除了我有链接的 home 之外的其他 .tsx 文件中不存在其他路由代码（在它们的末尾带有 guid）。我错过了什么吗？是否需要其他东西才能允许与 react-router 进行深度链接？

【问题讨论】：

作为一个仅供参考的“index.html”存在于目录“./wwwroot/”

标签： webpack react-router webpack-dev-server

【解决方案1】：

对于那些也遇到此问题的人，我找到了解决方案（至少对于我的问题）。原来 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

【讨论】：