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

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 不再 默认历史道具为哈希历史。请使用 hashHistory 单例。 https://github.com/ReactTraining/react-router/blob/master/upgrade-guides/v2.0.0.md#no-default-history

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

Answer 2

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

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

我可以通过两种方式使我的事情发挥作用：

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

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

2) 你也可以使用useHistory。

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

3) 在我的情况下，使用browserHistory，如果我使用我的路由作为 localhost:5000/#/example 那么它工作正常，没有哈希就不行。

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

编辑： 最后，我得到了使用 browserHistory 使其工作的解决方案。 请检查一下。 https://stackoverflow.com/a/38585657/3241111

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 in browser，我只是从我的webpack.config.js 文件中放置一个简单的devServer 配置目前我正在努力，也许可以帮助某人....

module.exports = {

 ...

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

 ...

}