React Router Dom 不渲染任何组件答案

【问题标题】：React Router Dom not rendering any componentReact Router Dom 不渲染任何组件
【发布时间】：2017-11-14 08:41:49
【问题描述】：

我有一个非常简单的项目，反应路由器 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 标签。

请帮忙

【问题讨论】：

不工作。我已经试过了。但是由于它的 react-router-dom，反正也不需要它
代码对我来说看起来不错..你能摆脱那个 componentDidMount 函数并使用 Link 组件导航吗？
我也尝试过，在这种情况下，第一个组件会在我第一次导航的地方呈现。但其他组件不渲染。
没有错，只是想确保这不是问题的根源。 react-router-dom 还附带了一个 Redirect 组件。使用起来有点奇怪，但它对于基于当前状态的编程导航很有用
您能否更具体地说明您无法实现的目标？也许再提出一个问题并将链接发布在这里

标签： javascript reactjs react-router react-redux react-router-dom

【解决方案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);

【讨论】：

您是否有机会检查此答案。有帮助吗
我知道这个答案已经有一年了，但它对我有用！谢谢！但我只是在答案中包含withRouter 来自react-router-dom 而不是react-router。