React路由器显示空白页面

时间:2017-09-07 12:28:31

标签: node.js reactjs react-router create-react-app

我正在尝试使用react-router。

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './pages/HelloWorld';
import {Router, Route, IndexRoute, hashHistory,browserHistory} from "react-router";
...
const app = document.getElementById('root')
ReactDOM.render(<HelloWorld/>, app);

这里是虚拟类HelloWorld:

import React, { Component } from 'react';

class HelloWorld extends Component {
  render(){
      return(<h1> HelloWorld </h1>);
  }
}

export default HelloWorld;

使用此设置一切正常。但是,使用路线我最终会有一个空白页面。

ReactDOM.render(
<Router history = {hashHistory}>
    <Route path ="/" component={HelloWorld}>
    </Route>
</Router>,
app);

错误在哪里?我搜索了stackoverflow,但似乎没有答案。

对我来说真的很奇怪,以下代码也会产生一个空白页面:

const Routes = () => (
  <Router history = {browserHistory}>
    <Route path ="/" render={ () => (<h1> HelloWorld </h1>) } />
  </Router>
);
const app = document.getElementById('app')
ReactDOM.render(<Routes/>, app);

3 个答案:

答案 0 :(得分:1)

您正在以V3的方式使用V4。

而不是

import {Router, Route, IndexRoute, hashHistory,browserHistory} from "react-router";

以这种方式导入依赖项:

import {BrowserRouter as Router, Route} from "react-router";
import createHistory from "history/createBrowserHistory"  // browser history moved into a standalone package since v4.

答案 1 :(得分:0)

好的“一个”解决方案是:

NewColor = sqrt(R1*R2),sqrt(G1*G2),sqrt(B1*B2)

答案 2 :(得分:0)

99%确定您的问题是您的代码具有相对链接。让它绝对。

<!-- do this -->
<script src="/static/bundle.js"></script>
<!-- not -->
<script src="static/bundle.js"></script>
<!-- or -->
<script src="./static/bundle.js"></script