Reactjs路由器匹配回调参数总是未定义的

Reactjs router match callback parameters are always undefined

本文关键字：未定义 参数 回调 路由器 Reactjs      更新时间：2023-09-26

我使用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 ...

问题是路由文件中的exports default。它返回一个类似{ defaults: { // routes in here }的对象，而在客户端上，它返回的对象类似{ // routes in here }。您需要以不同的方式导出文件，如modules.exports = [...routes...];。

我猜您使用的是babel 6，而不是babel 5。

我也有类似的问题。babel 5可以，但babel 6不行。

经过长时间的调试，我发现进行以下更改为我解决了问题

更改：

 match({Routes, location}

至：

match({Routes.default, location}

您得到了错误的es6析构函数赋值。破坏分配

match({Routes, location})需要是match({routes, location})

或更安全的方式

match({routes:Routes, location:location})

您的路线是问题所在。您有一个顶级<Router>，它将在match之后传递到RoutingContext中。这是向后的，通常在客户端，我们在<Router>组件中创建一个RoutingContext。

我认为您只是想让<Router>只是一个<Route>，以便在所有路由中提供您的顶级<MenuView>组件。

相关文章：