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

我已经使用 npm install react-router 安装了 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 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

最佳答案

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

您也可以尝试使用任何您的主页组件设置一个 IndexRoute，以便它具有引用。

链接到路线可能会有所帮助，这样您就可以看到 URL 中出现的内容，以确保它是您要查找的内容。

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

链接:

<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'));

应用程序 Controller :

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

关于javascript - 为什么 react 路由器抛出 'Cannot GET/example' 错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35104761/