Question

我使用create react app创建了我的应用程序，并且路由工作正常，直到导航栏中的路由无法加载为止。

曾经尝试调试了一段时间，并且想知道我是否可以从该特定文件中获取问题，所以我能否得到一些帮助

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

将在下面显示所有必需的文件：

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

我目前正在使用React Router v5！

请让我知道是否需要添加更多信息

Answer 1

使用如下所示的connected-react-router。

在页面刷新之前，React路由器路由不会呈现

1 个答案: