在页面刷新之前反应路由器路由不渲染

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();