react-router not changing页面

Question

无论我访问哪条路由，react-router（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后台，所以网址看起来像localhost/calendar/public和localhost/calendar/public/about，这可能是问题。但是，无论何时我使用其他路由（例如localhost/calendar/public/foo），服务器都会返回该页面不存在。

编辑

这里有一个方法，我得到它的工作，但它更是一个黑客不是一个解决方案，我仍然不知道为什么原来的问题又出现了。

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

您的竞价并没有Compponents。你需要使真实的组件成为一个组件的最小例子，可以是

import“反应”中的React，{Component};

class Foo extends Component { 

     constructor(props) { 
     super(props); 

     this.state = {   
     }; 
    } 

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

那么你可以导入它在你的路由

import Foo from "PATH"; 

那么您可以在路由

使用它，也将是更好的使用：

<Router history={createHistory}> 

另一个问题可能是你的htaccess。控制台中是否有错误？

Answer 2

您需要将history对象传递给<Router ... />组件或使用其中一个高级路由器。 <BrowserRouter />。请参阅文档：

https://reacttraining.com/react-router/web/api/Router