Question

我使用此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 + '.');
});

为什么没有呈现任何想法？ - 我有点绝望

Answer 1

似乎你必须在后端服务器中创建一个通配符路由URL，它会将你带回到重新加载的地方，如下所示：

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

在index.html中更正导入，如：

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

Answer 2

好的我自己发现了 - 反应 - 路由器的npm没有得到历史对象，所以我切换到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

提供索引文件时启用重新加载

ReactRouter不呈现任何内容

2 个答案: