0

Is there a way to pass a prop from the first component via the <Link> to the <Route> other than having a parameter in the URL?

If the parameter is in the URL, it can be changed, which shouldn't be possible.

class FirstComponent extends React.Component {
    render() {
        return (
            <Link to={ "/app/secondcomponent/test_article_name" }>Link to SecondComponent</Link>
        )
    }
}

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/app/secondcomponent/:article_name" render = {(routeProps) => ( <SecondCompnent {...routeProps} mytestprop="testprop" /> )} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('app')
); 

The above <Link> is passing "test_article_name" as a parameter. I would like to pass an additional prop to <Route> that can't be changed by rewriting the URL.

If this is not possible, I'd make the second component pull the prop I need from the server, but this means an extra API call.

M3RS
  • 6,720
  • 6
  • 37
  • 47

0 Answers0