How can I pass in a number when I link to a different page in React.js?

render(

    <Router>
        <Switch>
            <Route exact path="/" component = { Home } />
            <Route exact path="/gallery" component = { Gallery } />
            <Route exact path="/details" component = { Details } />
        </Switch>
    </Router>,

    // Define your router and replace <Home /> with it!
    document.getElementById('app')
);

Here is my routing for my web app

        return data.map((eachData, index) => {
            return (  <Link to={{ pathname: '/details/' + this.state.selectedKey }}><PokemonInfo poke={ eachData } key={ index } /></Link> );
        });
    };

And this is the part of code that I try to Link to the /details page when I move to another link. I would like to pass in a number (not a state. unlike my sample code).

Briefly, I want to pass in, let's say 2, into the link, and make it direct to /details/2, and retrieve that '2' in the details.jsx component.

How can I do this?

EDIT: Details

class Details extends React.Component {

constructor() {
    super();


    this.state = {


        pokemon: []

    };


};

componentWillMount() {
// Called first time the comp is loaded right before the comp is added to the page
    console.log('Component WILL MOUNT!')
    console.log("passed" , this.props.match.params.id)
    var url = "https://pokeapi.co/api/v2/pokemon/" + this.props.match.params.id; 

    axios.get(url)

    .then((response) => {
        // setState re-renders component
        this.setState({
            pokemon: response.data
        })

        console.log(this.state.pokemon)

    })

        .catch((error) => {
            console.log(error);
    })
}

render() {

    return (
            <Card className = "PokemonView">
                <Card.Content>
                    <Card.Header className = "PokemonView_header">
                        { this.state.pokemon.name }
                    </Card.Header>
                    <Card.Meta>
                        Pokedex #{ this.state.pokemon.id }
                    </Card.Meta>
                    <Card.Meta>
                        Height { this.state.pokemon.height }
                    </Card.Meta>
                    <Card.Meta>
                        Weight { this.state.pokemon.weight }
                    </Card.Meta>

                </Card.Content>
            </Card>
    );
}

}

export default Details

3 answers

  • answered 2017-10-11 10:18 Davin Tryon

    If I remember correctly, you set up the route like:

    <Route path="/details/:id" component = { Details } />
    

    And then in the Details component you get this.props.match.params.id to use.

  • answered 2017-10-11 10:18 justadudewhohacks

    You will have to add the route: <Route path="/details/:myParam" component={Details} /> and can retrieve the route param with this.props.match.params.myParam in your Details component.

  • answered 2017-10-11 10:18 Dane

    Try using

    <Route path="/details/:id" component={(props) => (<Details {...props}/>) } />