反应路由器 4 指向主域而不是子文件夹

Question

>我有一个应用程序，它位于我的主域名的子文件夹中。所以我的域 Test.com，我的应用程序位于该域中名为"播放器"的文件夹中，即 Test.com/player。

问题是 React Router 在需要指向 Test.com/player 时指向 Test.com。

另一个问题是我的索引文件位于名为"public"的文件夹中。

如何在 React Router 4/htacess 中执行此操作？

谢谢

应用程序

import React from "react";
import {render} from "react-dom";
import {BrowserRouter, Route, Switch, hashHistory} from "react-router-dom";
import Nav from "./components/Nav";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
class App extends React.Component {
  render() {
    return (
      <BrowserRouter history={hashHistory}>
        <div>
          <Nav />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
            <Route render={() => {
              return <h1>Not Found!</h1>
            }} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}
render(<App />, document.getElementById("main"));

网络包

const webpack = require("webpack");
module.exports = {
  entry: {
    filename: "./app/app.js"
  },
  output: {
    filename: "./app/build/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["es2015", "react"]
        }
      }
    ]
  },
  devServer: {
    inline: true,
    port: 5000,
    contentBase: "./public",
    historyApiFallback: true,
  }
}

Answer 1

根据 React Router Docs，BrowserRouter 有

基名称：字符串 所有位置的基本 URL。如果您的应用已投放 从服务器上的子目录中，您需要将其设置为 子目录。格式正确的基名称应具有前导 斜杠，但没有尾部斜杠。

您可以使用

class App extends React.Component {
  render() {
    return (
      <BrowserRouter history={hashHistory} basename="/player">
        <div>
          <Nav />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
            <Route render={() => {
              return <h1>Not Found!</h1>
            }} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

您还需要 webpack.config 上的这些属性.js

module.exports = {
   entry : 'your entry',
   output : {
      path : 'your path',
      filename : 'your filename',
      publicPath : '/' //ADD THIS LINE (either / or /player will work)
   },
   devServer : {
      historyApiFallback : true // ADD THIS LINE
   }
}