反应路由器如何在现有组件中渲染新组件

Question

这很难解释，但假设我在顶部有一个导航栏，其中包含所有主要链接。我从顶部的导航栏中单击模型链接，它会在下面呈现模型页面。模型页面包含不同模型的缩略图。我怎样才能获得它，以便单击该模型的缩略图让我加载该人的组件来代替模型页面？

这是我目前所拥有的。顺便说一句，我使用的是 React-router 3.0.5

App.jsx：

import React from 'react';
import LeftPane from './LeftPane.jsx';
import RightPane from './RightPane.jsx';
import CenterPane from './CenterPane.jsx';
import TopPane from './TopPane.jsx';
import Models from './Models.jsx';
import Projects from './Projects.jsx';
import Contact from './Contact.jsx';
import Router from 'react-router';
import axios from 'axios';

class App extends React.Component {
  constructor() {
    super();
    this.state = { modelBucket: [] };
  }

  componentWillMount() {
    axios({
      method: 'POST',
      url: '/modelcall'
    })
    .then((response) => {
      console.log('this is the axios call from models.jsx (the response) :', response);
      this.setState({modelBucket: response});
    })
    .catch((error) => {
      console.log('this is an error from the axios call in models.jsx', error);
    });
  }

  render() {
    return (
      <div>
        <div className="container-fluid">
          <div>
            <TopPane />
          </div>

          <div className="container-fluid">    
            <div className="row content imageThumbMargin">
              <div> 
                {React.Children.map(this.props.children, child => React.cloneElement(child,
                  { 
                    modelNames: this.state.modelBucket.data,
                    path: this.props.route.path
                  })
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Model.jsx：（modelcard 是单独的缩略图）

import React from 'react';
import ModelCard from './ModelCard.jsx';
import axios from 'axios';

class Models extends React.Component {
  constructor() {
    super();
    this.state = { modelList: [] };
  }

  render() {
    return (
      <div>
        <p className = "text-center">Models Page</p>
        {this.props.modelNames.map((model, i) => {
          return (
            <div key={i} className = "imageThumbs col-md-2">
              <ModelCard key={i} model={model} />
            </div>
          );
        })}
      </div>
    );
  }
}

export default Models;

和 ModelCard.jsx：

import React from 'react';
import {Link} from 'react-router';

class ModelCard extends React.Component {
  constructor(props) {
    super(props);
  }


  render () {
    return (
      <div>
        <Link to={'/' + this.props.model.name}><div>
          <img src={this.props.model.imageUrl} />
          <p className="text-center imageMarginRight">{this.props.model.name}</p>
        </div></Link>
      </div>
    );
  }
}

export default ModelCard = ModelCard;

Answer 1

将导航栏保持在其他组件“顶部”的一种方法是渲染基本路由，然后将其他路由嵌套在其中：

<Route path='/'>
  <Route path='/modelcards' component={ModelCards} />
  <Route path='/modelcards/:id' component={Model} />
<Route>

然后您可以调用browserHistory.push('/modelcards/${id}')，参数id 将在this.props.params.id 下可用，您可以在render 函数中渲染相应的卡片。如果你想传递很多参数，又不一定要为其创建路由，可以在推送调用中传递参数：browserHistory.push({ pathname:'/modelcards', params: { id: ..., title:... })