将参数槽通过React-Router链接发送到

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;

在“ AllTiles”组件上，我有一个渲染功能，该函数将我的所有文章与指向仅显示单个图块的show组件的链接进行映射

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似乎都可以正常工作，但是这不是正常的，有人知道为什么吗？

这是我作为json获得的图块对象：[{“ id”：41，“ name”：“ Edward”，“ description”：“ d”，“ price”：null，“ finish”：“ d”， “ color”：“ d”，“ suitability”：“ d”，“ status”：null，“ picture”：“ data：image / jpeg; base64，/ 9j / 4A ...”}]

Answer 1

我相信您错过了如何访问URL中的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