I'm learning React and I find myself in the task of assigning a component different paths. I try to define them in the props of the component but I can't. Here the code:
const IntroJuegos = () => {
const [popupVisible, setPopupVisible] = useState(false)
return (
<div className='container mt-3'>
<IntroJuego src={minJuegoPrueba} />
{popupVisible ? <PopUp onClick={() =>
setPopupVisible(false)} /> : null}
<Button
onClick={() =>
setPopupVisible(true)}
name='DESAFIAR AMIGO'
/>
<Button
onClick={() =>
<Link to='/promociones'/>}
name='ELEGIR PREMIO'
/>
<Button
onClick={() => <Link to='/promociones' />
}
name='VER PUNTAJES'
/>
</div>
)
}
export default IntroJuegos
The first button opens a pop Up but the next two I need to go to other pages of the app. Could someone guide me?
To redirect the user you should use Redirect.
Note that when rendered, it will redirect the user to the specified path. I recommend you use a state, where you have two properties. One with which you can check whether or not to redirect the user to a specific route, another in which you store the url to which he will be redirected.
It would be something like this: