Question

我的组件基本上是我显示所有瓷砖的地方（默认情况下的文章：

    import React, {Component} from 'react';
import AllTiles from './all_tiles';
import ShowTile from './show_tile';
import {Switch, Route} from 'react-router';

class TilesNavigation extends Component{
  render(){
    return(
      <Switch>
        <Route exact path='/' component={AllTiles}/>
        <Route path='/show/:id' component={ShowTile}/>
      </Switch>
    )
  }
}
export default TilesNavigation;

并在＆＃39; AllTiles＆＃39;我有一个渲染函数，它将我的所有文章都映射到显示组件的链接，该组件只显示一个图块

import React, {Component} from 'react';
import Modal from 'react-modal';
import TileForm from './TileForm.js';
import axios from 'axios';
//import {Link} from 'react-router-dom';
//import {getTiles} from '../actions/index.js';
//import {connect} from 'react-redux';

const API_URL = "http://localhost:5000/api/v1";
//---------Elements needed fro React-modal--------------
const customStyles = {
  content : {
    width                 : '60%',
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};



class AllTiles extends Component{
  constructor(){
    super();
    this.state = {
      modalIsOpen: false,
      tiles: []
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.renderTiles = this.renderTiles.bind(this);
  }
  componentWillMount(){
    axios.get(`${API_URL}/tiles`)
    .then(function (response) {
      this.setState({ tiles: response.data });
      }.bind(this));
  }
  renderTiles(){
    return this.state.tiles.map((tile) =>{
      return(
        <li key={tile.id} className="tiles">
          <img src={tile.picture} alt="Displaying tiles"/>
          <div className="card-block">
            <h4 className="card-title">{tile.name}</h4>
          </div>

        </li>
      )
    })
  }

  // "react-modal" methods
  openModal() {
      this.setState({modalIsOpen: true});
  }

  afterOpenModal(){

  }

  closeModal() {
      this.setState({modalIsOpen: false});
  }


  render(){

    return(
      <div className="anchor">
      <button
          className="glyphicon glyphicon-plus-sign float-right"
          id="addTile"
          onClick={this.openModal}>
      </button>
      <ul>
      {this.renderTiles()}
      </ul>
      <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
          >
        <TileForm closeModal={this.closeModal}/>
      </Modal>

      </div>
    );
  }
}

// function mapStateToProps(state){
//   return {tiles: state.tiles.all }
// }

    export default AllTiles;
And each one of the articles is supposed to take me to a show_article component where only one component will be showed in detail

    import React, {Component} from 'react';

    class ShowTile extends Component {
      render(){
        return(
          <div>something to know if the component is displaying</div>
        )
      }
    }
    export default ShowTile;

即使路由器正在重定向显示空白区域，控制台中没有错误，也没有显示组件，我的所有其他Link to似乎都正常工作但不是这个，有人知道为什么吗？ / p>

这是我作为json得到的tile对象： [ { ＆＃34; id＆＃34;：41，＆＃34;姓名＆＃34;：＆＃34;爱德华＆＃34;，＆＃34;描述＆＃34;：＆＃34; d＆＃34;，＆＃34;价格＆＃34;：null，＆＃34;完成＆＃34;：＆＃34; d＆＃34;，＆＃34;颜色＆＃34;：＆＃34; d＆＃34;，＆＃34;适用性＆＃34;：＆＃34; d＆＃34;，＆＃34; status＆＃34;：null，＆＃34;图片＆＃34;：＆＃34;数据：image / jpeg; base64，/ 9j / 4A ......＆＃34; } ]

Answer 1

我相信您错过了如何在网址

中访问ID

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class ShowTile extends Component {
 render(){
    const { id } = this.props.params
    const { router } = this.context
    return <div>something to know if the component is displaying</div>
 }
}

ShowTile.contextTypes = {
  router: PropTypes.object.isRequired
}

export default ShowTile;

如果您想要更多访问路由器

，我还提供了contextType

发送Params Trough React-Router Link到

1 个答案: