Debe usar enrutamiento/visualización condicional usando Javascript, aquí está tratando de usar ambos.

sin enrutamiento

 import React, { useState } from 'react'; import { NavLink, Outlet } from "react-router-dom"; function SidenavSection(props) { const [active, setActive] = useState("tab1") const isActive = (key) => (active === key ? 'active' : ''); return ( <div> <div > <div sm="3" className='border sideNav'> <a href="" className=`btn btn-link ${isActive('tab1')}` onClick={() => setActive("tab1")}>Overview</a> <br/> <a href="" className=`btn btn-link ${isActive('tab2')}` onClick={() => setActive("tab2")}>Align & Ratio</a> <br/> <a href="" className=`btn btn-link ${isActive('tab3')}` onClick={() => setActive("tab3")}>Avatar</a> <br/> </div> <div sm="9" className='border'> <div> {active === "tab1" && <div>section component 1</div>} {active === "tab2" && <div>section component 2</div>} {active === "tab3" && <div>section component 3</div>} </div> </div> </div> </div> ); } export default SidenavSection;

En primer lugar, no necesita usar NavLink para esto. Puede lograr una clase activa agregando un operador ternario para los nombres de clase.

 import React, { useState } from "react"; import { NavLink } from "react-router-dom"; export default function App() { const [active, setActive] = useState("tab1"); return ( <div> <div> <div sm="3" className="border sideNav"> <p to="" className={`btn btn-link ${active === "tab1"? "active":""}`} onClick={() => setActive("tab1")} > Overview </p>{" "} <br /> <p to="" className={`btn btn-link ${active === "tab2" && "active"}`} onClick={() => setActive("tab2")} > Align & Ratio </p>{" "} <br /> <p to="" className={`btn btn-link ${active === "tab3" && "active"}`} onClick={() => setActive("tab3")} > Avatar </p>{" "} <br /> </div> <div sm="9" className="border"> <div> {active === "tab1" && <div>section component 1</div>} {active === "tab2" && <div>section component 2</div>} {active === "tab3" && <div>section component 3</div>} </div> </div> </div> </div> ); }

Sin embargo, debe intentar crear un objeto o matriz que incluya los datos de los enlaces, de modo que pueda recorrerlos fácilmente sin mucho código, y establecer un enlace activo también será más fácil de esta manera.

 import React, { useState } from "react"; import { NavLink } from "react-router-dom"; export default function App() { const [active, setActive] = useState("0"); const els = [ {tab:1, name: "Overview",}, {tab:2, name: "Avatar"}, {tab:3, name: "Align & Ratio"}, ] return ( <div> <div> <div sm="3" className="border sideNav"> { els.map((item, index)=>{ return <p onClick={()=>{setActive(index)}} key={index} className={index === active ? "active" : ""} > {item.name} </p> }) } <br /> </div> <div sm="9" className="border"> <div> {active === "tab1" && <div>section component 1</div>} {active === "tab2" && <div>section component 2</div>} {active === "tab3" && <div>section component 3</div>} </div> </div> </div> </div> ); }