反應路由器4指向主域不子文件夾

Question

我有一個應用程序位於我的主域的子文件夾內。因此，Test.com是我的域名，我的應用程序位於該域名稱爲「Player」的文件夾中，即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")); 

的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

根據反應路由器文檔，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 
    } 
}