反応ルータがページを変更していない

Question

反応ルータ（v4）はホームページにアクセスしていますが、URLを解析してswitch文でレンダリングするとうまくいきます。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 

const Home =() => <div>home page</div> 
const About =() => <div>about page</div> 

render((
    <Router> 
    <Switch> 
     <Route path="/" component={Home} /> 
     <Route path="/about" component={About} /> 
    </Switch> 
    </Router> 
), document.getElementById('root')) 

問題であるかもしれない、私は、ApacheサーバとLaravel/PHPのバックエンドを使用していますので、URLはlocalhost/calendar/publicとlocalhost/calendar/public/aboutのように見えます。ただし、別のルート（例：localhost/calendar/public/foo）を使用するたびに、サーバーはページが存在しないことを返します。

EDIT

は、ここで私はそれが働いてしまった方法ですが、それは解決策よりもハックの多くのだと元の問題が発生した理由を、私はまだわかりません。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 

const url = new URL(window.location.href) 
const isDev = (url.host == "localhost") 

const browserApp = (
    <Router> 
    <Switch> 
     <Route exact path={`${isDev ? "/calendar/public/" : "/"}`} component={Home}/> 
     <Route path={`${isDev ? "/calendar/public/about" : "/about"}`} component={About}/> 
    </Switch> 
    </Router> 
) 

Answer 1

あなたの意見は矛盾していません。あなたは実際のコンポーネントを作る必要がありますコンポーネントの最小限の例ができるでしょう

インポート反応、{コンポーネント}から "反応する";

<Router history={createHistory}> 

：

class Foo extends Component { 

     constructor(props) { 
     super(props); 

     this.state = {   
     }; 
    } 

    render() { 
     return (
     <div/>)} 
    } 

あなたは、あなたが

をルーティングで使用することができますし、また、これを使用する方が良いでしょう、あなたのルーティング

import Foo from "PATH"; 

でそれをインポートすることができます追加の問題があなたのhtaccessになる可能性があります。コンソールにエラーがありますか？

Answer 2

historyオブジェクトを<Router ... />コンポーネントに渡すか、ハイレベルルーターの1つを使用する必要があります。 <BrowserRouter />。 docs：