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

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

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

Answer 2

你的conts不是Compponents。您需要将实际组件作为组件的最小示例

从“react”中导入React，{Component};

class Foo extends Component {

       constructor(props) {
        super(props);

        this.state = {        
        };
    }

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

然后您可以在路由

中导入它

import Foo from "PATH";

然后你可以在路由

中使用它

最好还是使用它：

 <Router history={createHistory}>

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

react-router不改变页面

2 个答案: