I copied below directly from the v5.1 documentation and just updated my href. The link works in a dropdown I have but I want to leverage the below buttons instead.
<a href="/events/?future=true" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Upcoming events</a>
<a href="/events/?past=true" class="btn btn-primary" role="button" data-bs-toggle="button">Past events</a>
Below is in my boilerplate.ejs file:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Which is from the install page.
This dropdown code works fine but I want it in the button form (above):
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Filter
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="/events/?future=true">Upcoming Events</a></li>
<li><a class="dropdown-item" href="/events/?past=true">Past Events</a></li>
</ul>
</div>
My buttons click and light up, but don't change the route. Why isn't this working?
it's not changing route because of the query mark you have in your url, you have:
/events/?future=true
/events/?past=true
if you want a different route it should be a clear route, not a query. do you have a backend server?
if yes I think your url must be: (in case you want to redirect)
/events/future
/events/past
In other case, can you please provide some more information, do you have files with those names? how do you expect those to redirect? and why?
However, I'm sure your url is changing in the url browser bar whem you click either. In short, A query doesn't redirect.
I'm sorry I can't write a plain comment, still need few points to be able to write anywhere I'd like.