React Router Dom不渲染任何组件

时间:2017-06-12 18:53:25

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

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

请帮忙

1 个答案:

答案 0 :(得分:1)

您可以尝试使用WithRouter包装组件,然后使用 ids = [123, 456, 789, 999]; names = ['foo', 'bar', 'zab', 'zzz']; result = ids.map(function(_, i) { return {id: ids[i], name: names[i]} }); console.log(result)

更改路径

尝试

this.props.history.push()