reactjs – React路由器导航不起作用

我已经在ES6中使用react路由器实现了一个反应JS测试应用程序,但它似乎不起作用.我的代码片段如下：

app.js
-------

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';

ReactDOM.render(Routes,document.getElementById('react-container'));

routes.js
---------

import React from 'react';
import { DefaultRoute,Link,Route,RouteHandler,Router } from 'react-router';
import Page1 from './page1';
import Home from './home';
import { IndexRoute } from 'react-router';

let routes = 
  <Router>
    <Route path="/" component={Home}>
      <Route path="page1" component={ Page1 }/>
    </Route>
  </Router>

export default routes

home.js
-------

import React,{ Component } from 'react';
import Header from './components/header';

export default class Home extends Component {
  constructor() {
    super();
  } 

  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

page1.js
--------

import React,{ Component } from 'react';

export default class Page1 extends Component {
  constructor() {
    super();
  } 

  render() {
    return (
      <div>
        <h1> Page 1 </h1>
      </div>
    );
  }
}

导航到“/”和“/ page1”似乎落在指示标题部分的页面中.任何帮助赞赏.

听起来你想在导航到/时显示第1页以显示？如果是这样,那么默认情况下你需要一个IndexRoute /路由到page1的 docs seem to indicate：

let routes = (
  <Router>
    <Route path="/" component={Home}>
      <IndexRoute component={Page1} />
    </Route>
  </Router>
);

原文链接：https://www.f2er.com/react/301037.html

reactjs – React路由器导航不起作用

猜你在找的React相关文章