为什么反应路由器不工作？

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>

这是 Link Link

控制台没有错误

编辑

更改后我在控制台中收到此错误(由此引起Router)

index.js(第27585行)警告:[react-router]位置"/"与任何路由都不匹配

index.js(第27585行)警告:[react-router] hashHistory不再将历史支柱默认为哈希历史记录.请改用 react-router单身人士.http://tiny.cc/router-defaulthistory

Answer 1

你的榜样路线嵌套你父母的路线内,所以你should't需要/在/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