Dynamically updating content (eg. clicking button updates div) and update url on website without refresh, then stay on the same page on manual refresh

So I'm struggling to figure out how to do this and I can't find any answers. I've been searching the whole web for the last two days but haven't found an answer yet.

The goal: I want a dynamic navigation for an admin/dashbaord website that only updates a div (the main view) of a website and updates the url accordinly (eg. pressing on the welcome menu button loads the welcome.html into the #main-view and the url updates from samplewebsite.com/dashboard to samplewebsite.com/dashboard/welcome). Then on refresh, stay on the same website with the loaded content (eg. samplewebsite.com/dashboard/welcome still has welcome.html in the #main-view but doesn't actually navigate to the welcome.html file.

Examples: mee6.xyz/moderation or contacts.google.com

What I've already accomplished: Loading welcome.html into #main-view and updating the url with /welcome by clicking on a button by doing this:

HTML:

<a href="/dashboard/welcome" id="welcome-button">Welcome</a>

JS:

$('#welcome-button').click(function(event){
    event.preventDefault();
    var href = $(this).attr('href');
    $('#main-view').load(href, function() {
        console.log("Load was performed.");
      });
    history.pushState(null, "Welcome", href);
})

I'm using Flask with Python where I have the following routing set up:

@app.route('/dashboard')
def dashboard_server():
    return render_template("dashboard_server.html")

@app.route('/dashboard/welcome')
def welcome():
    return render_template("welcome.html")

The behaviour I experience: When I click the welcome menu button, #main-view updates with the welcome.html and the url updates. When I refresh the browser though, I takes me to the actual welcome.html which makes sense, since it's pointing to this file. That's how I loaded the html into the div in the rist place. But how can I prevent that? Also the navigation (back/forward) doesn't work but that's another problem I'll adress after I got this figured out.

What I behaviour I expect: I want it to stay on the main page with #main-view still being filled with welcome.html. Then when pressing another menu button I want it to update the div and url and on the refresh be on the same page with the updated div and so on.

A visual explanation:

I'm grateful for any kind of help. Thanks a lot in advance!