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

Question

I have component wich is basically where I show all my tiles(articles by default:

    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;

and at the 'AllTiles' component i have a rendering function that maps all my articles with a link to the show component that just shows a single tile

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;

even thoug the router is redirecting is showing a blank space with no errors in the console and without showing the component at all, all my others Link to seem to work properly but not this one, somebody knows why?

and this is a tile object I get as a 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

I believe you missed how to access id in the url

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;

I also provide the contextType in case you want more access to the router