reactjs – React-router链接不起作用

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

导读：React-router是一个非常糟糕的开始……看似基本的东西不起作用.使用react-router 2.0.0,我的链接组件将URL更新为/ about,但我的页面在此之后不呈现About组件… 入口点js var React = require('react');var ReactDOM = require('react-dom');var Router = req

React-router是一个非常糟糕的开始……看似基本的东西不起作用.使用react-router 2.0.0,我的链接组件将URL更新为/ about,但我的页面在此之后不呈现About组件…

入口点js

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory;
var App = require('./components/App.react');
var About = require('./components/About');

ReactDOM.render(
    <Router history={hashHistory} >
        <Route path="/" component={App}>
            <Route path="about" component={About} />
        </Route>
    </Router>,document.getElementById('app')
);

App.js

'use strict';

var React = require('react');
var Link = require('react-router').Link;
var Header = require('./Header');
var UserPanel = require('./UserPanel');
var ModelPanel = require('./ModelPanel.react');
var EventPanel = require('./event/EventPanel');
var VisPanel = require('./vis/VisPanel');
var LoginForm = require('./LoginForm');
var AppStore = require('../stores/AppStore');
var AppStates = require('../constants/AppStates');

var App = React.createClass({

  [... code omitted ...]

  render: function() {
    var viewStateUi = getViewStateUi(this.state.appState);

    return (
      <div>
        <Header />
        <Link to="/about">About</Link>
        {viewStateUi}
      </div>
    );
  }

});

由于’About’路由是’App’路由的子路由,您需要将this.props.children添加到您的App组件：

var App = React.createClass({

 render: function() {

   var viewStateUi = getViewStateUi(this.state.appState);

    return (
      <div>
        <Header />
        <Link href="/about">About</Link>
        {viewStateUi}
        {this.props.children}
      </div>
    );
  }
});

或分开您的路线：

ReactDOM.render(
  <Router history={hashHistory} >
    <Route path="/" component={App} />
    <Route path="/about" component={About} />
  </Router>,document.getElementById('app')
);

（编辑：李大同）

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