Is there a way to dynamically change the navbar items based on the URL without having separate navbar components for each side? My current navbar design features 3 links on the left side and 3 links on the right, but I want to display only one side at a time.
For example, when visiting pages like /page-1, /page-2, or /page-3, I would like to show only the links on the left side. Conversely, when on pages such as /page-4, /page-5, or /page-6, I want to display the links on the right side. I've attempted to use match.params for this purpose without success. How can I achieve this functionality? Apologies for any language barriers in my request.
Layout.js
...
export default class Layout extends Component {
render() {
return (
<div>
<Route path="/:name" component={Navbar} />
<SomeContentComponent />
</div>
);
}
}
Navbar.js
const Navbar = ({ match }) => {
const currentPage = match.params.name
return (
<div>
<ul className="left">
<li><Link to="/page-1">Page 1</Link></li>
<li><Link to="/page-2">Page 2</Link></li>
<li><Link to="/page-3">Page 3</Link></li>
</ul>
<ul className="right">
<li><Link to="/page-4">Page 4</Link></li>
<li><Link to="/page-5">Page 5</Link></li>
<li><Link to="/page-6">Page 6</Link></li>
</ul>
</div>
)
}