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

【问题标题】：How to manually navigate to route with React + React-Router-Component如何使用 React + React-Router-Component 手动导航到路由
【发布时间】：2014-08-09 05:08:46
【问题描述】：

我创建了一个 React 组件库，JS 反应页面视图呈现和控制。

// 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>

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

在我的 grunt 服务器中

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

最终结果：用户应将地址粘贴到栏中（即 site.com/users）并导航到应用程序 /users。

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

【问题讨论】：

标签： javascript gruntjs reactjs

【解决方案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');
   });
});

【讨论】：