How to add multiple pages with React & Redux - reactjs

Question

I'm coding a MediumBlog like application and I'm using React & redux and Django Rest Framework for my Backend. I already made the first page, which is the first page you see when you go to https://medium.com/
I'm able to navigate to different categories without refreshing the page, which is the Main Purpose of React. But now, when you want to read a post in the medium blog, the page is refreshing. I have no idea how to do it with react. I know how to build a Single Page App, but here, it seems that a new page is being loaded when you click on a post. My question is :
.Is this loading a new page instead of a new route ( a new HTML file or something )
.How can I handle this " multipage " structure with react
Here is my Single Page App that can load content from different categories
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import { Provider } from 'react-redux';
import { store } from '../store.js';
import AppHeader from './header/AppHeader';
import HeaderCategories from './header/HeaderCategories'
import PostListStream from './posts/PostListStream';
import PostList from './posts/PostList';
import { BrowserRouter } from "react-router-dom";
import { Route, Switch } from 'react-router-dom';
class App extends Component {
render(){
return(
<Provider store={store}>
<div className="App">
<AppHeader />
<HeaderCategories />
<Switch>
<Route exact
key="sciences"
path="/sciences"
render={() => <PostListStream field="sciences" />}
/>
<Route exact
key="littérature"
path="/littérature"
render={() => <PostListStream field="littérature" />}
/>
<Route exact
key="sciences-sociales"
path="/sciences-sociales"
render={() => <PostListStream field="sciences-sociales" />}
/>
</Switch>
<PostList />
</div>
</Provider>
)
}
}
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('app'));
Here is where my are :
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './css/App.css';
import { Provider } from 'react-redux';
import { store } from '../store.js';
import AppHeader from './header/AppHeader';
import HeaderCategories from './header/HeaderCategories'
import PostListStream from './posts/PostListStream';
import PostList from './posts/PostList';
import { BrowserRouter } from "react-router-dom";
import { Route, Switch } from 'react-router-dom';
class App extends Component {
render(){
return(
<Provider store={store}>
<div className="App">
<AppHeader />
<HeaderCategories />
<Switch>
<Route exact
key="sciences"
path="/sciences"
render={() => <PostListStream field="sciences" />}
/>
<Route exact
key="littérature"
path="/littérature"
render={() => <PostListStream field="littérature" />}
/>
<Route exact
key="sciences-sociales"
path="/sciences-sociales"
render={() => <PostListStream field="sciences-sociales" />}
/>
</Switch>
<PostList />
</div>
</Provider>
)
}
}
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('app'));
Thank you so much

Answer 1

You can create dynamic routes to your posts using react-router-dom in a similar way to what you have done with your other routes. react-router doesn't really refresh the page, although it looks like it. It simply renders another component when the route changes.
To create dynamic routes for your posts you can do something like this:
<Route
path="/post/:postId"
render={() => <PostComponent />}
/>
or like this if you want it to be a little more readable:
<Route
path="/post/:postId"
component={PostComponent}
/>
:postId here is a dynamic id, whatever is placed after /post/ in your URL will be considered the postId by react-router.
Inside your PostComponent you can do something like this to fetch your postId variable:
import { withRouter } from "react-router-dom";
const PostComponent = withRouter(props => (
const postId = props.match.params.postId;
return ();
))
You can then use your postId to fetch your post from the backend and do whatever you need to do with it. As soon as you go to your post URL now, it will show the PostComponent without hard refreshing the page.