Question

我的主要（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文件中的entry，output和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文件）。除了我有链接的家庭之外的其他.tsx文件中不存在其他路由代码（guids concat＆＃39; d在它们的末尾）。我错过了什么吗？是否还需要其他东西以允许与react-router进行深层链接？

Answer 1

对于那些也遇到过这个问题的人，我找到了一个解决方案（至少对我的问题而言）。原来index.html文件有相对路径（而不是深路径）。

例如，通过将“main.js”的“script src”从“./main.js”更改为“/main.js”，它开始工作（使用webpack-dev-server服务）。 / p>

可在此处找到进一步阅读的来源：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls

React-Router不会尊重深层链接

1 个答案: