リアクションルータがルートを処理できず、一致しなかったことの警告を返すことができません

Question

私はリアクションを試して、それがどのように動作するかを知るためのサンプルプロジェクトを用意しています。

私はwebpack dev serverを使用していますが、これは実際の展開には十分ではありません。明らかに実際の展開になると、良い解決策はないように見えます。私のドメイン内で私のアプリケーションを使用できないherokuを使用していたことがわかりました。そして、現実の開発では受け入れられないherokuで終わるべきです私が間違っていると、私は自分のWebアプリケーションを配備する最良の方法が何であるかわからないので）。

私のアプリを展開するには、tomcatを使用していると思う唯一の方法でした。だから私は自分のプロジェクトのbundle.jsとindex.htmlファイルをコピーしてEclipse IDEのWebContentに入れました。以下はindex.jsファイルです：私はウェブパックのdevのサーバーを使用する場合

import {render} from "react-dom"; 
import React from "react"; 
import {Router, Route, browserHistory, useRouterHistory, IndexRoute} from  "react-router"; 
import { createHistory } from 'history'; 
import {Provider} from "react-redux"; 
import Home from "./container/Home"; 
import {Bridge} from "./router-bridge/Bridge"; 
import {T} from "./components/T"; 
import store from "./store"; 



class Tj extends React.Component { 

    render() { 
     const history = useRouterHistory(createHistory)({ 
     basename: '/test' 
     }); 
    return (
     <Router history={history}> 
      <Route path={"/"} component={Bridge} > 
       <IndexRoute component={Home} /> 
       <Route path={"user"} component={T} /> 
       <Route path={"home"} component={Home} /> 
      </Route> 
      <Route path={"/test/"} component={Bridge} > 
       <IndexRoute component={Home} /> 
       <Route path={"user"} component={T} /> 
       <Route path={"home"} component={Home} /> 
      </Route> 
      <Route path={"home"} component={Home} /> 
     </Router> 
    ); 
    } 
} 
    render(
    <Provider store={store}> 
    <Tj/> 
</Provider>, 
window.document.getElementById('mainContainer')); 

だから、私のルータが正常に動作しますが、私は、その結果のためにすべてを設定しますEclipseプロジェクトのWebコンテンツ（にファイルをコピーするとき私と私は私のブラウザのコンソールで次のエラーを取得する）プロジェクトがdeplyable、次のURL http://localhost:8080/test/index.htmlと到達します：

Warning: [react-router] Location "/test/index.html" did not match any routes

私には、また、これと同様のいくつかの記事を見て：

similar posts

しかし、問題を解決できませんでした。誰も助けることができますか？

Answer 1

デフォルトでは、React Routerは、あなたのアプリの場所があなたのサイトのルート（/）であることを前提としています。 /testディレクトリにサイトをホストすると、React Routerは指定しない限りそのことを認識しません。あなたがする必要があるのは、基本名（/test）を指定して、useRouterHistoryヒストリエンハンサーを使用して履歴を「強化」することです。

今はReact Routerに含まれているbrowserHistoryを使用していますが、ベース名を知っている独自の履歴インスタンスを作成する必要があります。

import { useRouterHistory, Router } from 'react-router' 
// createHistory creates a browser history instance 
import { createHistory } from 'history' 

const history = useRouterHistory(createHistory)({ 
    basename: '/test' 
}) 

class App extends React.Component { 

    render() { 
    return (
     <Router history={history}> 
     ... 
     </Router> 
    ) 
    } 
} 

また、あなたがHerokuのを使用して独自ドメインを使用することができますが、あなたが支払う顧客である必要はあり（あるいは、少なくとも、あなたのアカウントに添付のクレジットカードを持っています）。