React-Router: pass props from one component to another using link

Question

I set up an app with 3 pages, Home, Reptiles and Map.

My problem comes on the Reptiles and Map page. On the reptiles page, I display a list of species, each with a list of range countries and a link "See Map Here". When the user clicks on a country, I want the Map page to be shown with the selected country highlighted (I haven't implemented that yet, so, for now, I just want that country to be passed to the map page).

And when the user clicks on a "See Map Here" for a species, I want the Map page to be shown with all the range countries of that species to be highlighted. Right now I can pass in reptile and country props in the Route for react-router, but when I try to pass in the props in the link directly in the Reptlie.js file, I get the error Warning: Unknown prop reptile on tag.

Remove this prop from the element. Can someone help me figure out how to pass props to links directly in components? Also, how would you generate dynamic URLs? For example, map/species1 or map/country1?

I think my problem is in Reptiles.js. The version of react-router is 3.0.2

Below is my structure:

Below are some images:

Below is my code: router.js:

const routes = (
  <Router history={browserHistory}>
    <Route component={App}>
        <Route path="/" component={Home}/>
        <Route path="reptiles" name="reptiles" component={Reptiles}/>
        <Route path="map" name="map" component={Map} country="Taiwan" reptile="Beardy"/>
    </Route>
  </Router>
);

export default routes;

App.js:

class App extends Component {
  render() {
    return (
      <div className="container">
        <header>
          <span className="icn-logo"><i className="material-icons">code</i></span>
          <ul className="main-nav">
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/reptiles">Reptiles</NavLink></li>
            <li><NavLink to="/map">Map</NavLink></li>
          </ul>       
        </header>
        {this.props.children}

      </div>
    );
  }
}

export default App;

Reptiles.js:

const Reptiles = () => {
  let reptiles = ReptileList.map((reptile) => {
    return (
      <li className="reptile" key={reptile.id} >
        <img className="reptile-img" src={reptile.img_src} />
        <h3>{reptile.name}</h3>
        <h4> Range &nbsp; &nbsp; 
            <span className="seeMap">
                <NavLink to="map" reptile={reptile.id}>  
                See Map Here 
                </NavLink>
            </span>
        </h4> 
            {reptile.range.map(function(country,index) {
                // only add comma if it's not the last one
                return <span key={country}><NavLink to="map" country={country}> {(index < reptile.range.length-1)? country+',' : country} </NavLink></span> 
            })
            }

      </li>
    );
  }); 

  return (
    <div className="main-content">
      <h2>Reptiles</h2>
      <ul className="group">
        {reptiles}    
      </ul>
    </div>
  );
}

export default Reptiles;

Map.js

var Map = React.createClass({

  render: function() {


    return (
        <div>
            <h2>Country passed from props: {this.props.route.country} </h2>
            <h2>Reptile passed from props: {this.props.route.reptile} </h2>
        </div>
    )

    }

});



export default Map;

Answer 1

In route.js, you can pass the parameter as follows:

<Route path="map/:countryName/:reptileId" component={Map} name="map" />

In Reptile.jsx,Pass the parameters selected like from props.country or from state wherever you have stored. Make sure to pass some default values in the link when not applicable. For example, for the country in the first link, I have passed all. You can pass according to your requirements. You can pass the parameters as:

<NavLink to={`map/${reptile.id}`}>      

<NavLink to={`map/${country}/${reptile.id`}>

and access these parameters through context in Map.jsx this.props.params.reptileId

More about parameters

Like in your case, the parameter reptile id is must in both the cases and country is needed only in the case where specific country is clicked. Hence you can make the parameter country optional and reptile id compulsory. You can follow this

<Route path="map/:reptileId(/:countryName)" component={Map} name="map" /> 

and then pass accordingly.

<NavLink to={`map/${reptile.id}`}>      

<NavLink to={`map/${reptile.id}/${country}`}>