为什么反应路由器抛出 'Cannot GET /example' 错误？

Question

我正在学习 React，我需要用 React Routes 添加一些路由。

我已经安装了 react-router 和 npm install react-router。

这是我必须声明路线的 main js

import React from 'react';
import {ReactDOM, render} from 'react-dom';
import App from './Components/AppComponent';
import Example from './Components/ExampleComponent';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'


render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));

导航到 / 工作正常。但是当我去 /example 我得到：

Cannot GET /example

错误

我做错了什么？

这样我遇到了同样的问题：

<Router>
    <Route path="/" component={App} />
    <Route path="/example" component={Example}/>
</Router>

示例组件

import React from 'react';

class Example extends React.Component {
    render(){
        return <div>Example</div>
    }
}

export default Example

这是Link:

<Link to={'/example'}>aa</Link>

控制台没有错误。

更改后我在控制台中收到此错误（由 Link 引起）

index.js (line 27585) Warning: [react-router] Location "/" did not match any routes

index.js (line 27585) Warning: [react-router] Router no longer defaults the history prop to hash history. Please use the hashHistory singleton instead. https://github.com/ReactTraining/react-router/blob/master/upgrade-guides/v2.0.0.md#no-default-history

Answer 1

您的示例路线嵌套在您的父路线中，因此您不需要 /example 中的 /。

您也可以尝试使用您的主组件设置 IndexRoute，以便它具有参考。

Link进入路线可能会有所帮助，这样您就可以看到 URL 中即将发生的事情，以确保它是您要找的东西。

除了 {this.props.children}，你的 App 组件实际上不应该渲染任何东西，因为路由器正在处理的所有组件都将在这里渲染，路由器不只是渲染它控制的主文件中的东西路由以及要在 App 组件（通常称为 AppController）中挂载的组件，因此您需要构建一个 Home 组件，该组件将在 / 路由上呈现并声明在路由器中使用 IndexRoute 然后设置Link在组件之间，如果一切都正确完成，你应该可以开始了。

Link:

<Link to="example">
  Click Me!
</Link>

主要：

import React from 'react';
import {ReactDOM, render} from 'react-dom';
import App from './Components/AppComponent';
import Home from './Components/Home';
import Example from './Components/ExampleComponent';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'


ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));

应用程序控制器：

import React from 'react';

class App extends React.Component {

  render() {
    return (
      <div>
        <div className="routerView">
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

示例组件：

import React from 'react';
import {Link} from 'react-router';


class Example extends React.Component {
    render(){
        return(
          <div>
              Example
              <Link to="/">Click Me!</Link>
          </div>
        )
    }
}

export default Example

主页组件：

import React from 'react';
import {Link} from 'react-router';

class Home extends React.Component {
    render(){
        return (
            <div>
               Home
               <Link to="/example">To Example!</Link>
            </div>
        )
    }
}

export default Home

Answer 2

我遇到了与问题完全相同的问题。

尝试上面的答案后，我仍然得到同样的错误，有趣的是，上面的答案中也有语法错误 <IndexRoute component={Home}> 必须关闭或自行关闭。

我可以通过两种方式让我的东西发挥作用：

1) 这不是一个完美的方法，但其他让它工作的方法是使用 hashHistory 只需 import { Router, Route, IndexRoute, hashHistory } from 'react-router'; 并将路由器修改为 <Router history={hashHistory}>

现在URL，看起来像http://localhost:5000/#/example?_k=a979lt

2) 您也可以使用 useHistory。

但这也会在 URL 中添加 # 但它看起来像 http://localhost:5000/#/example link 中不存在查询参数的地方，因为我们会将它们设置为 false..

3) 在我的例子中，browserHistory，如果我使用我的路线作为 localhost:5000/#/example 然后它工作正常，没有哈希就不行。

检查此 link 以了解每个人的更多详细信息。 https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md

编辑： 最后，我得到了使用 browserHistory 使其工作的解决方案。请检查一下。

Answer 3

尝试在 App 组件的路径前添加 exact

render((
    <Router history={browserHistory}>
        <Route exact path="/" component={App}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));

Answer 4

从 react router v4 开始，如果您将 webpack 与 react 一起使用，则需要在 webpack.config.js 文件中添加 devServer 设置以防止出现此问题。只需确保您的 devServer 配置已将 historyApiFallback 设置为 true，否则您将在浏览器中收到 Cannot get error ，我只是将一个简单的 devServer 配置从我目前正在处理的 webpack.config.js 文件，也许对某人有帮助....

module.exports = {

 ...

 devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    open: true,
    historyApiFallback: true,
    stats: 'minimal'
  }

 ...

}

为什么反应路由器抛出 'Cannot GET /example' 错误？

Why is react router throwing 'Cannot GET /example' error?

javascript

reactjs

react-router