How is Sololearn displaying the lessons without opening up a new page?...

Question

Example. When you are taking the Python course. You Go to https://www.sololearn.com/learning/1073

once you go to the link, you click on basic concepts, then click on "1.1 Lesson".

If you look in the address bar the url changes to https://www.sololearn.com/learning/1073/4429/4561/1 -- like it's going into three directories of a page.

But if you look to the left of the address bar, the loading symbol doesn't react like it should to when a page is loading. Which leads me to think that they're not really going into three directories of folders/pages.

So how are they displaying the directories ...learning1073/4429/4561, without actually making pages like that (like the following).
-- index.html
-- 1073
-- 4429

Answer 1

Sololearn web is a SPA (Single Page Application). Here are some articles about how the SPA routing works:

https://medium.com/altcampus/implementing-simple-spa-routing-using-vanilla-javascript-53abe399bf3c

https://medium.com/@bryanmanuele/how-i-implemented-my-own-spa-routing-system-in-vanilla-js-49942e3c4573

Answer 2

Thank you Igor Makarsky
That’s what i was talking about.

Answer 3

JavaScript can perform url routing. For example, in reactjs, you can route any url to any component you wish.

So here an jsx example of react router part in routing different urls to different components that mimics the Sololearn routes you just described.

<Router>
<nav>
<ul>
<li>
<Link to="/learning/1073/4429/4561/1">Lesson 1.1<Link>
</li>

<li>
<Link to="/learning/1073">Python Course<Link>
</li>

<li>
<Link path="/">Main page<Link>
</li>
</ul>
</nav>

<Switch>
<Route path="/learning/1073/4429/4561/1">
<Lesson ch=1.1 />
</Route>

<Route path="/learning/1073">
<PythonCourse />
</Route>

<Route path="/">
<MainPage />
</Route>
</Switch>
</Router>