引导按钮切换不像文档那样工作

Question

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 .

My buttons click and light up, but don't change the route. Why isn't this working?

Answer 1

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.