javascript - 如何使用 React + React-Router-Component 手动导航到路由

Question

我已经创建了一个 React 组件库，其中 JS react 页面 View 呈现和控制。

// Application js, controls the routes.
var Application = React.createClass({
    mixins: [Router],

    routes: {
        '/': HomePage,
        '/users': PerformerPage
        // , null: NotFoundPage
    },

    render: function () {
        return this.transferPropsTo(this.renderRouteHandler());
    }
});

// and in HomeView.js, a link to a page
<Link href={'/users'}>{'Test'}</Link>

这一切都非常有效。除了当我手动导航到该链接时，它显然还没有处理它......所以我的问题是，如果服务器总是重定向到索引，会 react 捕捉到这个吗？我非常精通 grunt，并且总体上构建自动化，但不幸的是，node js 服务器还不是我的强项。

在我的 grunt 服务器中

  task =>
        'connect:livereload',
        'webpack:development',
        'open',
        'watch'

最终结果:用户应将地址粘贴到栏中(即 site.com/users)并导航至应用程序/users。

谢谢 :D 任何帮助都会很棒。

Answer 1

一种方法是将路由放在它们自己的文件中(比如 client/routes.js)

module.exports = {
    '/': HomePage,
    '/users': PerformerPage
    // , null: NotFoundPage
};

现在您可以在应用程序文件和节点服务器中要求它们:

var app = require('express')();
var routes = Object.keys(require('../client/routes'));

routes.forEach(function(route){
   app.get(route, function(req, res){
      res.sendFile(__dirname + '/static/index.html');
   });
});