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