리액트 스위칭 다이내믹세그먼트가 액세스하면 크래시
다음과 같은 루트 설정이 있습니다(관련성이 있다고 생각되는 부분만 표시).
var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, NotFoundRoute } = Router;
var routes = (
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name='home' path='/home' handler={HomeHandler}/>
<Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.getElementById('application'));
});
Settings react 파일에는 다음과 같은 항목이 있습니다.
var Settings = React.createClass({
mixins: [Router.State],
render: function() { ... }
});
에 접속하면host.local/settings및 로그this.getParams()모든 것이 정상적으로 동작하며, 파일이 렌더링되어 있습니다.Object {tab: undefined}콘솔로 이동합니다.하지만 내가 노력하면host.local/settings/user- 콘솔이 다음과 같은 것을 반환할 것으로 예상했습니다.Object {tab: 'user'}- 모든 게 어딘가에서 부서지고 그냥 던지기 시작해요.Uncaught SyntaxError: Unexpected token <콘솔로 이동합니다.
리액션은 아직 젊고, 따라서 많은 상황에서 오류가 다소 모호합니다.
Path Matching Guide에 기재되어 있는 사양에 따라 보았습니다만, 표준 사양인 것 같습니다.리액트 라우터 자체에 문제가 있거나 뭔가 부족한 것이 있는 것 같습니다.
갱신하다
tl;dr: 리액트 라우터에는 문제가 없습니다.
롱 버전:
이 문제는 리액트에 있는 것이 아닌 것 같습니다.JS 자체 반응 라우터도 없습니다.이는 주로 gulp-webserver의 버그(프록시를 사용하여 병렬로 실행되는 개별 프로젝트를 연결하기 위해 사용하는 것)를 포함하고 URL이 링크를 통해 액세스되는 대신 브라우저에서 직접 입력될 때 오류를 유발합니다.
테스트를 실시했습니다만, 네비게이트 할 때는 정상적으로 동작합니다만, 이 github의 문제에서 설명한 대로 직접 액세스 하면 크래쉬 합니다.이것에 의해, 기본적으로 기능적인 diplink 테스트는 불가능하게 됩니다만, 실가동시에는 동작합니다.
업데이트 2
tl;dr: gulp-webserver에도 문제가 없습니다.
저 같은 경우에는...relative그리고.absolutegulp-webserver에 관한 문제가 발생하지 않습니다.좀 더 구체적으로 말하면, 스크립트와 CSS의 참조가 절대적인 것을 확인하고, URL에 입력하는 경로에서 검색하려고 하지 않도록 해야 했습니다.
예:
다음의 2개의 URL이 있습니다./settings그리고./settings/account이 경우 폴백파일에 포함된 스크립트는 다음과 같습니다.<script src="scripts/main.js"></script>서버에서는 404가 반환됩니다.이것은, 에 파일이 없기 때문입니다./settings/scripts/main.js.
바보 같은 짓이지만 혹시라도 속아 넘어갈 경우를 대비해서 이게 도움이 됐으면 좋겠어요
당신의 분석 덕분에 리액트 라우터의 문제가 아니라 제 경로의 문제라는 것을 알 수 있었습니다.
는 ㅇㅇㅇㅇㅇㅇㅇㅇ다를 넣었습니다.<base href="/" /><head> 집 사람index.html효과가 있었습니다(:
리액트 라우터 3의 편집:
설정 시 합니다.<base>:
Warning: Automatically setting basename using <base href> is deprecated
and will be removed in the next major release. The semantics of <base href>
are subtly different from basename. Please pass the basename explicitly in the
options to createHistory
대신 다음과 같은 작업을 수행하는 것이 좋습니다.
const history = useRouterHistory(createHistory)({
basename: '/'
});
당신이 보고 있는 오류는 발생하지 않습니다.코드에는 문제가 없는 것 같아서 붙이지 않은 것 같습니다.
당신의 사양에 따라 퀵프로젝트를 작성했습니다.이것이 제 설정입니다.
'use strict';
var React = require('react'),
Router = require('react-router'),
AppHandler = require('./pages/app.js'),
HomeHandler = require('./pages/home.js'),
SettingsHandler = require('./pages/setting.js'),
NotFoundHandler = require('./pages/not-found.js'),
Route = Router.Route,
NotFoundRoute = Router.NotFoundRoute,
DefaultRoute = Router.DefaultRoute,
Routes;
Routes = (
/* jshint ignore:start */
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name='home' path='/home' handler={HomeHandler}/>
<Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
/* jshint ignore:end */
);
Router.run(Routes, Router.HistoryLocation, function (Handler, state) {
React.render(<Handler/>, document.body);
});
홈을 건너뛰고 찾을 수 없습니다.이것들은 문제가 아니기 때문에, 설정은 다음과 같습니다.js
'use strict';
var React = require('react')
Router = require('react-router');
var Setting = React.createClass({
mixins: [Router.State],
componentDidMount: function() {
//console.log(this.getParams());
},
render: function() {
/* jshint ignore:start */
console.log(this.getParams());
return (
<div>this is setting</div>
);
/* jshint ignore:end */
}
});
module.exports = Setting;
이것들이 도움이 되기를 바란다
언급URL : https://stackoverflow.com/questions/28253162/react-router-dynamic-segments-crash-when-accessed
'programing' 카테고리의 다른 글
| $watch 이벤트를 angularjs에서 수동으로 실행 (0) | 2023.04.04 |
|---|---|
| 각도 오류: "ngModel은 'input'의 기존 속성이 아니므로 바인딩할 수 없습니다." (0) | 2023.04.04 |
| 스프링 부트 컨트롤러 콘텐츠 네고시에이션 (0) | 2023.04.04 |
| fs.writeFileSync를 사용하여 JSON 개체를 JSON 파일에 쓰는 중 (0) | 2023.04.04 |
| Oracle에서 테이블 크기를 확인하는 방법 (0) | 2023.04.04 |