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

发布时间：2020-12-15 20:49:10 所属栏目：百科来源：网络整理

导读：我已经在ES6中使用react路由器实现了一个反应JS测试应用程序,但它似乎不起作用.我的代码片段如下： app.js-------import React from 'react';import ReactDOM from 'react-dom';import Routes from './routes';ReactDOM.render(Routes,document.getElementBy

我已经在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>
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!