0
저는 며칠 동안이 문제로 어려움을 겪었습니다.React (Isomorphic) 링크 렌더링이 클라이언트 측의 렌더링 경로가 아닙니다.
작동 방식 : 응용 프로그램이 서버 측에서 정상적으로로드됩니다. routes/index.jsx (내 서버 측 라우팅 파일)는 페이지를 잘로드합니다. console.log('News');은 클라이언트 자바 스크립트 콘솔과 페이지로드시 서버의 노드 로그에 모두 News의 로그를 표시합니다. 처음에는 모든 페이지를로드 할 수 있습니다.
문제 : 페이지가로드되고 헤더의 링크를 클릭하면 URL 표시 줄의 주소가 변경되지만 UI가 업데이트되지 않고 수행 할 경우 console.log('Home')이 표시되지 않습니다. News으로 이동해야한다면 홈으로 이동하십시오. 클라이언트 또는 서버에서 console.log('News');이 발생하지는 않습니다.
다음 파일이 있습니다. 웹팩
var ReactDOM = require('react-dom');
var React = require('react');
var Routes = require('./routes/routes.jsx');
var Redux = require('redux');
var Provider = require('react-redux').Provider;
function reducer(state) { return state; }
var store = Redux.createStore(reducer, window.PROPS);
ReactDOM.render(
<Provider store={store}>
{Routes}
</Provider>, document.getElementById('root')
);
Routes.JSX 용 - -
경로/Index.jsx이 - 서버 사이드 렌더링
var router = require('express').Router();
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var StaticRouter = require('react-router-dom').StaticRouter;
var Redux = require('redux');
var Provider = require('react-redux').Provider;
var App = require('../views/app.jsx');
function reducer(state) { return state; }
router.get('*', function(req, res) {
var initialState = { title: 'Home' };
const store = Redux.createStore(reducer, initialState);
var context = {};
var html = ReactDOMServer.renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
{require('../views/app.jsx')}
</StaticRouter>
</Provider>
);
var windowprops = store.getState();
windowprops = JSON.stringify(windowprops).replace(/</g, '\\u003c');
var frame = '<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/css/layout.css" /><title>'+store.getState().title+' | Lunar Realm</title></head><body><div id="root">'+html+'</div><script>window.PROPS = '+windowprops+'</script><script src="/bundle.js"></script></body></html>';
if(context.status >= 400) {
res.status(context.status).send(frame);
} else if (context.url) {
res.redirect(context.status, context.url);
} else {
res.send(frame);
}
});
module.exports = router;
보기/app.jsx
var React = require('react');
var ReactRouter = require('react-router-dom');
var Route = ReactRouter.Route;
var Layout = require('../views/Layout.jsx');
var Redirect = ReactRouter.Redirect;
var Switch = ReactRouter.Switch;
module.exports = (
<Layout>
<Switch>
<Route exact path='/' component={require('./Index.jsx')} />
<Route exact path='/news' component={require('./News.jsx')} />
</Switch>
</Layout>
);
Client.JS 들어 프런트 엔드 라우팅
var React = require('react');
var ReactRouter = require('react-router-dom');
var BrowserRouter = ReactRouter.BrowserRouter;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Redirect = ReactRouter.Redirect;
var Switch = ReactRouter.Switch;
var Layout = require('../views/Layout.jsx');
import createHistory from 'history/createBrowserHistory';
var history = createHistory();
module.exports = (
<BrowserRouter>
<Layout>
<Switch>
<Route exact path="/" component={require('../views/Index.jsx')} />
<Route exact path='/news' component={require('../views/News.jsx')} />
<Route component={require('../views/404.jsx')} />
</Switch>
</Layout>
</BrowserRouter>
);
전망/News.jsx -
가var React = require('react');
var News = React.createClass({
render: function(){
console.log('news');
return(
<div id="canvas-section-news" className="canvas-section">
News
</div>
);
}
});
module.exports = News;
사람이 내 UI가 업데이트되지 않는 이유 나를 알아내는 데 도움이 수 레이아웃의 자식? 나는 노드 로그 나 브라우저의 자바 스크립트 콘솔에 오류가 발생하지 않는다는 것을 알아 두어야한다.
"dependencies": {
"babel-loader": "^6.4.1",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"babel-register": "^6.24.0",
"express": "^4.15.2",
"history": "^4.6.1",
"mongoose": "*",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"react-router": "^4.0.0",
"react-router-dom": "^4.0.0",
"redux": "^3.6.0",
"webpack": "^2.3.3"
}