React router routes not rendering until page refresh - reactjs

Question

I created my application with create react app and the routes were working just fine up until a certain point the routes in my navbar I have as links would not load.
Been trying to debug for a while and was wondering if I could get some help as I feel like issue is coming from this specific file
import React from 'react'
import {fetchThreadds} from '../actions/fetchThreadds'
import Threaddform from '../components/Threaddform'
import Threaddlist from '../components/Threaddlist'
import Threaddshow from '../components/Threaddshow'
import {connect} from 'react-redux';
import {Route, Switch} from 'react-router-dom'
import { withRouter } from 'react-router-dom'
class ThreaddsContainer extends React.Component {
componentDidMount(){
this.props.fetchThreadds()
console.log("component did mount console", this.props)
}
render(){
console.log("render")
return(
<div>
<Switch>
<Route exact path='/thread/new' component={Threaddform}/>
{/* <Threaddform/><br></br> */}
<Route path='/threads/:id' render={(routerProps) => <Threaddshow {...routerProps} threadds={this.props.threadds}/>}/>
<Route exact path='/threads'render={()=> <Threaddlist threadds={this.props.threadds}/>} />
{/* <Threaddlist threadds={this.props.threadds}/> */}
</Switch>
</div>
)
}
}
const mapStateToProps = state => {
console.log("getting stuff from the store")
return {
threadds: state.threadds
}
}
export default withRouter(connect(mapStateToProps, {fetchThreadds}(ThreaddsContainer));
Will show all the necessary files below :
import React from 'react';
import './App.css';
import {connect} from 'react-redux';
import ThreaddsContainer from './containers/ThreaddsContainer';
class App extends React.Component {
render(){
return (
<div className="App">
<br></br> <h1 >The Sport Thread </h1>
<ThreaddsContainer/>
</div>
);
}
}
export default connect() (App);
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import {Provider} from 'react-redux'
import threaddReducer from './reducers/threaddReducer'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import Navbar from './components/Navbar'
import Sportupdate from './components/Sportupdate'
import Help from './components/Help'
import Login from './components/Login'
import Signup from './components/Signup'
import 'bootstrap/dist/css/bootstrap.min.css';
// import * as serviceWorker from './serviceWorker';
//The store
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
let store = createStore(threaddReducer, composeEnhancers(applyMiddleware(thunk)))
ReactDOM.render(
<Provider store={store}>
<Router>
<div>
<center><Navbar /></center>
<App />
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/updates" component={Sportupdate} />
<Route exact path="/help" component={Help} />
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
</div>
</Router>
</Provider>
,
document.getElementById('root')
);
and I am currently on react router v5!
Do let me know if I need to add more information

Answer 1

Use connected-react-router like below.
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App/App";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { ConnectedRouter } from "connected-react-router";
import * as initFastClick from "react-fastclick";
import { HelmetProvider } from "react-helmet-async";
import { configureStore, history, injectGlobalSaga } from "./utils";
import LocaleProvider from "./_components/LocaleProvider/Loadable";
import AuthProvider from "./_components/AuthProvider/Loadable";
import { locales } from "./locale";
import "bootstrap/dist/css/bootstrap.min.css";
import "./custom.scss";
import * as GLOBAL_CONSTANTS from "./utils/constants";
initFastClick();
const initialState = {};
const store = configureStore(initialState, history);
injectGlobalSaga(store);
const render = () => {
ReactDOM.render(
<Provider store={store}>
<LocaleProvider messages={locales}>
<ConnectedRouter history={history}>
<HelmetProvider>
<AuthProvider>
<App />
</AuthProvider>
</HelmetProvider>
</ConnectedRouter>
</LocaleProvider>
</Provider>,
document.getElementById("root")
);
};
// Hot reloadable translation json files
if (module.hot) {
// modules.hot.accept does not accept dynamic dependencies,
// have to be constants at compile-time
}
render();
serviceWorker.unregister();