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]位置＆＃34; /＆＃34;没有   匹配任何路线

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中的内容，以确保其符合您的要求。

你的应用程序组件实际上不应该呈现除{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'));

AppController的：

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}>

现在的网址，看起来像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

从React Router v4开始，如果您将Webpack与react一起使用，则需要在iVal1 = 0 iVal2 = 0 For Each Cel In Range("F2:F100") If Cel.value = "" And Cell.Offset(0,4).value <> "" and iVal1 <6 Then Cel.value = "Thomos" iVal1 = iVal1 + 1 End If If Cel.value = "" And Cell.Offset(0,5).value <> "" and iVal2 <6 Then Cel.value = "Jerry" iVal2 = iVal2 + 1 End If If iVal1 = 6 and iVal2 = 6 Then Exit For End If Next文件中添加class Door(models.Model) : image = models.ImageField(upload_to='doors') color = models.ForeignKey(Color, on_delete=models.CASCADE) price = models.DecimalField(max_digits=10, decimal_places=2, default='119.99')设置以防止此问题。只需确保您的devServer配置将webpack.config.js设置为devServer，否则，您将得到无法在浏览器中获取错误，我只是将一个简单的historyApiFallback配置放在我目前正在使用的webpack.config.js文件，可能会对某人有所帮助。...

true

Answer 4

尝试在App组件的路径

之前添加完全

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

为什么反应路由器会抛出＆＃39;无法获取/示例＆＃39;错误？

4 个答案: