Question

在react-router v3中，我们可以知道服务器端呈现何时与当前url不匹配。这允许我将请求传递给我的express.static中间件，而不是发送渲染的应用程序。

在react-router v4中，我们必须使用

    const htmlData = renderToString(
        <StaticRouter
            location={req.url}
            context={context}
        >
            <App/>
        </StaticRouter>
    );

以便在服务器端呈现。但是，它会自动将所有内容重定向到/。为什么这种行为甚至存在？难道我们不能像我们期望的那样错误地默默地失败吗？

我怎么知道没有任何内容匹配，以便我可以致电next()并让其他快递的路线完成这项工作？

以下是我想要使用的整个功能：

app.get('*', (req, res, next) => {
    const context = {};
    const htmlData = renderToString(
        <StaticRouter
            location={req.url}
            context={context}
        >
            <App/>
        </StaticRouter>
    );

    console.log(JSON.stringify(context, null, 4)); // empty object
    if (context.url) { // <------------------------ Doesn't work (taken from example and thought it would contain the unmatched url)
        winston.info(`Passing ${req.url} along`);
        next(); // <--------------- Never called even if no route matches.
    } else {
        res.send(pageContent.replace('<div id="main"></div>',
            `<div id="main">${htmlData}</div>`));
    }
});

我尝试根据this做一些事情，但// somewhere else是如此精确，我根本无法理解。

这是我的最后一次尝试，以防万一。这是Router.jsx文件，我计划在其中定义所有Route。

import React from 'react';
import PropTypes from 'prop-types';
import {
    BrowserRouter,
    Route,
} from 'react-router-dom';
import App from './components/App.jsx';

export const Status = ({ code, children }) => (
    <Route render={({ staticContext }) => {
        if (staticContext) {
            staticContext.status = code;
        }
        return children;
    }}/>
);

Status.propTypes = {
    code     : PropTypes.number.isRequired,
    children : PropTypes.node.isRequired,
};

export const NotFound = () => (
    <Status code={404}>
        <div>
            <h1>Sorry, can’t find that.</h1>
        </div>
    </Status>
);

class Router extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={App}/>
                    <Route component={NotFound}/>
                </div>
            </BrowserRouter>
        );
    }
}

export default Router;

（我知道这根本没有任何意义，因为StaticRouter直接使用App而没有关心Router.jsx，但我内部Route根本没有App我想，我真的不明白怎么做。

Answer 1

你应该将NotFoundPage组件路由逻辑放在你的App.jsx文件中，而不是你根本不使用的Route.jsx。

<Switch>
    <Route exact path="/" component={AppRootComponent}/>
    <Route component={NotFound}/>
</Switch>

除此之外，这个tutorial code是使用react router v4进行服务器端渲染的绝佳参考。

如果404

1 个答案: