Reactjs 通过路由器链接将参数发送到

我有一个组件，它基本上是我显示所有平铺的地方（默认情况下，文章：

    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;

import React，{Component}来自'React'；
从“./all_tiles”导入所有tiles；
从“./show_tile”导入ShowTile；
从“反应路由器”导入{交换机，路由}；
类TilesNavigation扩展了组件{
render（）{
返回(
)
}
}
导出默认TilesNavigation；

在“AllTiles”组件中，我有一个渲染功能，它通过一个链接将我的所有文章映射到只显示单个tile的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;

import React，{Component}来自'React'；
从“反应模态”导入模态；
从“/TileForm.js”导入TileForm；
从“axios”导入axios；
//从'react router dom'导入{Link}；
//从“../actions/index.js”导入{getTiles}；
//从'react redux'导入{connect}；
常量API_URL=”http://localhost:5000/api/v1";
//---------反应模态所需的元素--------------
常量自定义样式={
内容：{
宽度：“60%”，
前50%，
左：50%，
右图：“自动”，
底部：“自动”，
利润率：'-50%'，
转换：“转换（-50%，-50%）”
}
};
类AllTiles扩展组件{
构造函数（）{
超级（）；
此.state={
modalIsOpen:false，
瓷砖：[]
};
this.openModal=this.openModal.bind（this）；
this.afterOpenModal=this.afterOpenModal.bind（this）；
this.closeModal=this.closeModal.bind（this）；
this.renderTiles=this.renderTiles.bind（this）；
}
组件willmount（）{
get（`${API\u URL}/tiles`）
.然后（功能（响应）{
this.setState（{tiles:response.data}）；
}.约束（这个）；
}
renderTiles（）{
返回此.state.tiles.map（（tile）=>{
返回(

{tile.name}

)
})
}
//“反应模态”方法
openModal（）{
this.setState（{modalIsOpen:true}）；
}
后OpenModel（）{
}
closeModal（）{
this.setState（{modalIsOpen:false}）；
}
render（）{
返回(

{this.renderTiles（）}

);
}
}
//函数MapStateTops（状态）{
//返回{tiles:state.tiles.all}
// }
导出默认的所有瓷砖；
每一篇文章都应该带我去一个show_文章组件，其中只有一个组件会被详细展示
从“React”导入React，{Component}；
类ShowTile扩展组件{
render（）{
返回(
要知道组件是否正在显示的内容
)
}
}
导出默认ShowTile；

即使路由器重定向显示的是一个空白区域，控制台中没有错误，也没有显示任何组件，我的所有其他

链接到
似乎都正常工作，但这一个不行，有人知道为什么

这是一个作为json的tile对象：
[
{
“id”：41，
“姓名”：“爱德华”，
“说明”：“d”，
“价格”：空，
“完成”：“d”，
“颜色”：“d”，
“适用性”：“d”，
“状态”：空，
“图片”：“数据：图像/jpeg；base64，/9j/4A…”
}
]
我相信您错过了如何访问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;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
类ShowTile扩展组件{
render（）{
const{id}=this.props.params
const{router}=this.context
返回一些信息以了解组件是否正在显示
}
}
ShowTile.contextTypes={
路由器：PropTypes.object.isRequired
}
导出默认ShowTile；

我还提供了contextType，以防您想更多地访问路由器
您可以共享一个示例tile对象，也许还有您的AllTiles代码的其余部分吗？已经更新了您是否在任何地方渲染TilesNavigation？我在主体组件中渲染TilesNavigation，在该组件中，我有一个而不是把它放在tileNavigation里