如何使用React + React- router - component手动导航到路由

How to manually navigate to route with React + React-Router-Component

本文关键字：导航 路由 component React 何使用 React- router      更新时间：2023-09-26

我创建了一个React组件库，由JS React页面视图渲染和控制。

// 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和构建自动化，但不幸的是，node js服务器还不是我的强项。

在我的grunt服务器

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

最终结果:用户应该粘贴地址栏(如site.com/users)，并导航到应用程序/用户。

谢谢:D任何帮助都太好了。

一种方法是将路由放到它们自己的文件中(比如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');
   });
});
相关文章：