ReactJs How to link a page to open with a certain condition?

Question

I'm working on a website and I have created a profile page in this profile page there are buttons ( Settings , Favourites , Posts) I made it like a multi-step form , when you click one of those buttons it shows one of 3 pages ( each button has an onClick method that sets the page number and an if functions returns every page according to that number ) the first page that shows when you click on profile is the Settings and I have a button for favourites in the navbar and I want to link it to the profile page in a way that shows the favourites page and not the settings when I click on it. I apologize if my question isn't clear / understandable I'm still new to web development. Here's the code for the page display :

const [page,setPage]=useState(0);
const FormText=["Reglages","Mes Annonces","Favoris"]
const PageDisplay =()=> {
    if (page === 0){
        return <Reglages/>;
    }
    else if (page === 1){
        return <Mesannces/>;
    }
    else if (page === 2){
        return <Favoris />;
    }

this is the code for the buttons :

<Button onClick={()=>{setPage ((currentPage)=>currentPage=0);}} disabled={page===0}>Reglages</Button>
    <Button onClick={()=>{setPage ((currentPage)=>currentPage=1);}} disabled={page===1}>Mes Annonces()</Button>
    <Button onClick={()=>{setPage ((currentPage)=>currentPage=2);}} disabled={page===2}>Favoris</Button>

Answer 1

const [page, setPage] = useState(0)

//Where your will render, inside your div

<div>
{page === 0 ? < Reglages/> : page === 1 ? < Mesannces/> : page === 2 && < Favoris />
</div>

Buttons

<Button onClick={()=>setPage(0)} disabled={page===0}>Reglages</Button>
<Button onClick={()=>setPage(1)} disabled={page===1}>Mesannces</Button>
<Button onClick={()=>setPage(2)} disabled={page===2}>Favoris</Button>

    

I hope this helps