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.