为什么反应路由器抛出“无法获取/示例”错误？

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 我得到：

无法获取 /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（第 27585 行）警告：[react-router] 位置“/”不匹配任何路由

index.js（第 27585 行）警告：[react-router] Router 不再将 history 属性默认为哈希历史。请改用 hashHistory 单例。 https://github.com/ReactTraining/react-router/blob/master/upgrade-guides/v2.0.0.md#no-default-history

原文由 Pablo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您也可以尝试设置一个 IndexRoute 无论您的主组件是什么，以便它具有参考。

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

你的 App 组件不应该渲染除 {this.props.children} 之外的任何东西，因为路由器正在处理的所有组件都将在这里渲染，路由器不只是渲染主文件中的东西，它控制路由和在 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'));

应用程序控制器：

 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

原文由 RichG 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

从 react router v4 开始，如果您将 webpack 与 react 一起使用，则需要在 webpack.config.js --- 文件中添加 devServer 设置以防止出现此问题。只要确保你的 devServer 配置有 historyApiFallback 设置为 true ，如果不是你会得到 Cannot just get error in browser devServer 来自我当前正在处理的 webpack.config.js 文件的配置，也许可以帮助某人….

 module.exports = {

 ...

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

 ...

}

原文由 amdev 发布，翻译遵循 CC BY-SA 4.0 许可协议