Node.js 服务器渲染反应路由器v4直通if 404
在react router v3中,我们可以知道服务器端呈现何时与当前url不匹配。这允许我将请求传递给我的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} >
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>