React Router 不渲染任何东西答案

【问题标题】：ReactRouter does not render anythingReact Router 不渲染任何东西
【发布时间】：2017-05-16 18:35:04
【问题描述】：

我使用这个 jsx 脚本在我的 index.html 文件中呈现应用程序组件。

'use strict';

var React = require('react');
var ReactDOM = require('react-dom');

var Router = require ('react-router').Router;
var Route = require ('react-router').Route;
var IndexRoute = require ('react-router').IndexRoute;
var browserHistory = require ('react-router').hashHistory;

require('./css/style.css');

var LandingComponent = require('./components/landing.jsx');
var LoginComponent = require('./components/login.jsx');
var SignupComponent = require('./components/signup.jsx');
var HomeComponent = require('./components/home.jsx');

console.log("this is app.js");

var App = React.createClass({
    render: function () {
        return (
            <Router history={browserHistory}>
                <Route path={'/'} component={LoginComponent}></Route>
                <Route path={'/signup'} component={SignupComponent}></Route>
                <Route path={'/home'} component={HomeComponent}></Route>
            </Router>
        );
    }
});

ReactDOM.render(<App />, document.getElementById('app'));

像渲染一样直接渲染组件

ReactDOM.render(<LoginComponent />, document.getElementById('app'));

工作正常。但是路由器根本什么都不渲染。

我用

browserify -g reactify app.jsx > bundle.js

转换和捆绑我的组件和依赖项，因此这就是我的 index.html 文件：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title>React App</title>
    </head>
    <body>
    <div id="app"></div>
    <script src="bundle.js" type="text/javascript"></script>
    </body>
</html>

React Router 版本是 4.0.0

最后要说的是，我通过 express 服务于 index.html 和 app.jsx 文件的文件夹：

var express = Express();

// Serve static assets from the /public folder on default
express.use(Express.static(Path.join(__dirname, '/public')));

var port = process.env.PORT || 1337,
    httpServer = require('http').createServer(express);

httpServer.listen(port, () => {
    console.log('parse-server running on port ' + port + '.');
});

任何想法为什么没有渲染？ - 我有点绝望

【问题讨论】：

标签： reactjs react-router browserify

【解决方案1】：

您似乎必须在后端服务器中创建一个通配符路由URL，以将您带回到发生重新加载的位置，如下所示：

express.get('*', function (request, response){
    response.sendFile(Path.resolve(__dirname, 'public', 'index.html'))
})

index.html 中的正确导入，为：

var browserHistory = require ('react-router').browserHistory;

【讨论】：

我试过了 - 结果是一样的：index.html 发送正确，但是 bundle.js 没有渲染。
@JSthoff 浏览器控制台有什么错误吗？无论如何，请检查我的更新答案。
我检查了控制台并插入了一些日志 - 我不知道为什么，但我看起来像 "require ('react-router').browserHistory;"返回未定义。
您使用的是哪个版本的react-router？

【解决方案2】：

好的，我自己找到了——npm 的 react-router 没有得到历史对象，所以我切换到 react-router-dom：

var Router = require('react-router-dom').HashRouter;
var Route = require('react-router-dom').Route;
var Link = require('react-router-dom').Link;

一切照常进行：

<Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/login">About</Link></li>
        <li><Link to="/signup">Topics</Link></li>
          <li><Link to="/home">home</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={LandingComponent}/>
      <Route path="/login" component={LoginComponent}/>
      <Route path="/signup" component={SignupComponent}/>
        <Route path="/home" component={HomeComponent}/>
    </div>
  </Router>

注意：Hashrouter 在通过 express.use 提供索引文件时启用重新加载

【讨论】：