草庐IT

javascript - Reactjs 路由器匹配回调参数始终未定义

coder 2024-07-27 原文

我使用 match 方法进行服务器端渲染,回调中的参数始终未定义。可能出了点问题,但已经整整一天了,我无法理解它。

这是我的服务器端渲染。

// Create location from the history module.
let location = createLocation(req.url);

match({Routes, location}, (error, redirectLocation, renderProps) => {

    // TODO : Verify why this is always undefined
    console.log('ERROR :: ', error)
    console.log('REDIRECT LOCATION :: ', redirectLocation)
    console.log('RENDER PROPS :: ', renderProps)

    if (redirectLocation) {
        res.redirect(redirectLocation.pathname + redirectLocation.search)
    }
    // TODO : Verify why this is breaking
    //else if (error || !renderProps) {
    //  return console.log('Error while starting server :: ', error)
    //}
    else {

        Transmit.renderToString(RoutingContext, renderProps).then(({reactString, reactData}) => {

            console.log('REACT STRING :: ', reactString);
            console.log('REACT DATA :: ', reactData);

            let output = (
                `<!doctype html>
                <html lang="en-us" style="min-height:100vh; width: 100%; background-color: #eee;">
                    <head>
                        <meta charset="utf-8">
                        <title>react-isomorphic-pandora-app</title>
                        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
                        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,100,700">
                    </head>
                    <body>
                        <div id="react-root">${reactString}</div>
                    </body>
                </html>`
            );

            var webserver = process.env.NODE_ENV === "production" ? "" : "//localhost:8080"

            output = Transmit.injectIntoMarkup(output, reactData, [`${webserver}/dist/client.js`])

            res.send(output)

        }).catch((error) => {

            res.send(error.stack).type("text/plain").code(500)

        })
    }
})

这是我的客户端。

import React from "react";
import ReactDOM from "react-dom";
import {Router} from "react-router";
import Transmit from "react-transmit";
import routes from "../views/Routes";
import {createHistory} from "history";

let reactRoot = window.document.getElementById("react-root");
let history = createHistory();
let location = history.createLocation();

const routerOption = {
    routes: routes,
    history: history,
    location: location
}

Transmit.render(Router, routerOption, reactRoot);

if (process.env.NODE_ENV !== "production") {
    if (!reactRoot.firstChild || !reactRoot.firstChild.attributes ||
        !reactRoot.firstChild.attributes["data-react-checksum"]) {
        console.error("Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.");
    }
}

这是我的路线。

import React from "react"
import {Router, Route} from "react-router"
import MenuView from "./Menu"
import DefaultView from "./Default"
import AnotherView from "./Another"

export default (
    <Router component={MenuView}>
        <Route path="/" component={DefaultView} />
        <Route path="/another-view" component={AnotherView} />
    </Router>
);

如有任何帮助,我们将不胜感激。 谢谢:)

编辑--------

这是我的 MenuView 组件中的代码。

class MenuView extends React.Component {

    constructor(){

        super()

        this.menuItems = [
            {
                type: MenuItem.Types.SUBHEADER,
                text: 'Menu sub header'
            },
            {
                route: '/',
                text: 'Home'
            },
            {
                route: '/another-view',
                text: 'Another view'
            }
        ]
    }

    childContextTypes = {
        muiTheme: React.PropTypes.object
    };

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(DefaultTheme)
        }
    }

    _getSelectedIndex = () => {

        let currentItem;

        for (let i = this.menuItems.length - 1; i >= 0; i--) {
            currentItem = this.menuItems[i];
            if (currentItem.route && this.props.history.isActive(currentItem.route)) return i;
        }

    }

    _onLeftNavChange = (e, key, payload) => {

        this.props.history.pushState(null, payload.route);

    }

    render () {

        var style = {
            paddingTop: '92px'
        }

        return (
            <div>
                <LeftNav
                    ref="leftNav"
                    menuItems={this.menuItems}
                    onChange={this._onLeftNavChange}
                    selectedIndex={this._getSelectedIndex()}
                    style={style}/>
                <section className="content">
                    {this.props.children}
                </section>
            </div>
        )
    }

}

最佳答案

由于 Babel 5 与 Babel 6 和导出路由文件,它应该如下所示:

巴别塔 5:

  Router.match({ routes:routes, location: req.url}, etc ...

巴别塔 6:

  Router.match({ routes:routes.default, location: req.url}, etc ...

关于javascript - Reactjs 路由器匹配回调参数始终未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33528060/

有关javascript - Reactjs 路由器匹配回调参数始终未定义的更多相关文章

  1. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点,但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter,它工作正常,但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件,它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  2. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  3. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  4. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe? - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗?我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe,无需等待进程完成是否有任何ruby​​gems会支持我的问题? 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  5. ruby 正则表达式 - 如何替换字符串中匹配项的第 n 个实例 - 2

    在我的应用程序中,我需要能够找到所有数字子字符串,然后扫描每个子字符串,找到第一个匹配范围(例如5到15之间)的子字符串,并将该实例替换为另一个字符串“X”。我的测试字符串s="1foo100bar10gee1"我的初始模式是1个或多个数字的任何字符串,例如,re=Regexp.new(/\d+/)matches=s.scan(re)给出["1","100","10","1"]如果我想用“X”替换第N个匹配项,并且只替换第N个匹配项,我该怎么做?例如,如果我想替换第三个匹配项“10”(匹配项[2]),我不能只说s[matches[2]]="X"因为它做了两次替换“1fooX0barXg

  6. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码,如下所示:Something.createdo|x|x.foo=barend我想编写一个测试,它使用double代替block参数x,这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗? 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  7. ruby - 匹配未转义的平衡定界符对 - 2

    如何匹配未被反斜杠转义的平衡定界符对(其本身未被反斜杠转义)(无需考虑嵌套)?例如对于反引号,我试过了,但是转义的反引号没有像转义那样工作。regex=/(?!$1:"how\\"#expected"how\\`are"上面的正则表达式不考虑由反斜杠转义并位于反引号前面的反斜杠,但我愿意考虑。StackOverflow如何做到这一点?这样做的目的并不复杂。我有文档文本,其中包括内联代码的反引号,就像StackOverflow一样,我想在HTML文件中显示它,内联代码用一些spanMaterial装饰。不会有嵌套,但转义反引号或转义反斜杠可能出现在任何地方。

  8. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切,所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时,我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗?我正在使用OSX并安装了rvm。 最佳答案 或者,您可以只使用“require”,它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  9. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式? - 2

    我正在为一个项目制作一个简单的shell,我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止,我一直在使用CSV::parse_line,将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  10. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样?我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗? 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时,它将引发ArgumentError。defmy_method(number)

随机推荐