リアクタ・ルータ4がプライマリ・ドメインでサブフォルダではない

Question

私のプライマリ・ドメインのサブフォルダ内にあるアプリケーションを持っています。したがって、Test.comは私のドメインであり、私のアプリケーションはそのドメイン内の「Player」というフォルダ、つまりTest.com/playerにあります。

React RouterがTest.comを指し示す必要がある場合、Test.comを指し示すという問題があります。

他の問題は私のインデックスファイルが 'public'というフォルダにあることです。

React Router 4/htacessでこれを行うにはどうすればよいですか？文字列のすべての場所のためのベースURL：

おかげ

のAppルータドキュメントを反応させることにより

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は

ベース名を持っています。あなたのアプリがサーバー上のサブディレクトリから を提供されている場合は、サブディレクトリ に設定することをお勧めします。適切にフォーマットされたベースネームには先頭に のスラッシュがありますが、末尾にスラッシュはありません。

あなたはまた、あなたの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 
    } 
}