Question

我的应用程序位于主域的子文件夹中。所以Test.com是我的域名，我的应用程序位于该域名为“播放器”的文件夹中，即Test.com/player。

当需要指向Test.com/player时，问题是React Router指向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"));

的WebPack

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有

basename：string所有位置的基本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
   }
}

React Router 4指向主域而非子文件夹

1 个答案: