Node.js 服务器渲染反应路由器v4直通if 404

Node.js 服务器渲染反应路由器v4直通if 404,node.js,reactjs,express,react-router,isomorphic-javascript,Node.js,Reactjs,Express,React Router,Isomorphic Javascript,在react router v3中,我们可以知道服务器端呈现何时与当前url不匹配。这允许我将请求传递给我的express.static中间件,而不是发送呈现的应用程序 在react路由器v4中,我们必须使用 const htmlData = renderToString( <StaticRouter location={req.url} context={context} >

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

在react路由器v4中,我们必须使用

    const htmlData = renderToString(
        <StaticRouter
            location={req.url}
            context={context}
        >
            <App/>
        </StaticRouter>
    );
我试着做一些基于//的事情,但是其他地方的太精确了,我根本无法理解

这是我最后一次尝试,以防有所帮助。这是
Router.jsx
文件,我计划在其中定义所有
路由

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;
从“React”导入React;
从“道具类型”导入道具类型;
进口{
浏览器路由器,
路线,,
}从“反应路由器dom”;
从“./components/App.jsx”导入应用程序;
导出常量状态=({code,children})=>(
{
如果(静态上下文){
staticContext.status=代码;
}
返回儿童;
}}/>
);
Status.propTypes={
代码:PropTypes.number.isRequired,
子项:PropTypes.node.isRequired,
};
导出常量NotFound=()=>(
对不起,找不到。
);
类路由器扩展了React.Component{
render(){
返回(
);
}
}
导出默认路由器;

(我知道这没有任何意义,因为
StaticRouter
直接使用
App
,而不关心
Router.jsx
,但我在
App
里面根本没有
路由,所以我想我真的不知道怎么做。

你应该把NotFoundPage组件路由逻辑放在你的App.jsx里面le,而不是您根本不使用的Route.jsx

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


除此之外,这是使用react router v4进行服务器端渲染的一个很好的参考。

好的,所以我的路由应该在应用程序中定义,而不是路由器?路由器应该只做
<Switch>
    <Route exact path="/" component={AppRootComponent}/>
    <Route component={NotFound}/>
</Switch>