React路由器Dom沒有渲染任何組件

Question

我有一個非常簡單的項目和反應路由器DOM不渲染組件。有時它會呈現第一個路由的組件，但不會呈現。

下面的代碼爲App.js：

import React, { Component } from 'react'; 
import { Provider } from "react-redux"; 
import { 
    BrowserRouter as Router, 
    Route 
} from "react-router-dom"; 

import store from "./store"; 
import createHistory from 'history/createBrowserHistory'; 

import { IntroJm } from './components/intro/jm'; 
import { IntroNfc } from './components/intro/nfc'; 
import { IntroTxn } from './components/intro/txn'; 

import './assets/sass/main.scss'; 
import './static/css/main.scss'; 
import './static/css/pure.min.scss'; 
import './App.scss'; 

let browserHistory = createHistory(); 

class App extends Component { 

    componentDidMount() { 
    browserHistory.push("/intro/jm"); 
    } 

    render() { 
    return (
     <Provider store={store}> 
     <div> 
      <Router> 
      <div> 
       <Route path="/intro/jm" component={IntroJm} /> 
       <Route path="/intro/nfc" component={IntroNfc} /> 
       <Route path="/intro/txn" component={IntroTxn} /> 
      </div> 
      </Router> 
     </div> 
     </Provider> 
    ); 
    } 
} 

export default App; 

所有的路由組件只用span標籤簡單的組件。

請幫

Answer 1

你可以嘗試用包裝的WithRouter組件，然後改變與this.props.history.push()

路線嘗試

import React, { Component } from 'react'; 
import { Provider } from "react-redux"; 
import { 
    BrowserRouter as Router, 
    Route 
} from "react-router-dom"; 
import {withRouter} 'react-router'; 

import store from "./store"; 

import { IntroJm } from './components/intro/jm'; 
import { IntroNfc } from './components/intro/nfc'; 
import { IntroTxn } from './components/intro/txn'; 

import './assets/sass/main.scss'; 
import './static/css/main.scss'; 
import './static/css/pure.min.scss'; 
import './App.scss'; 

let browserHistory = createHistory(); 

class App extends Component { 

    componentDidMount() { 
    this.props.history.push("/intro/jm"); 
    } 

    render() { 
    return (
     <Provider store={store}> 
     <div> 
      <Router> 
      <div> 
       <Route path="/intro/jm" component={IntroJm} /> 
       <Route path="/intro/nfc" component={IntroNfc} /> 
       <Route path="/intro/txn" component={IntroTxn} /> 
      </div> 
      </Router> 
     </div> 
     </Provider> 
    ); 
    } 
} 

export default withRouter(App);