리액트 라우터 컴포넌트에 예기치 않은 토큰 < 오류가 있습니다.
리액트 앱의 라우터 컴포넌트를 작성하려고 합니다.새로운 리액트 클래스를 만들고 componentDidMount 메서드로 몇 가지 루트를 정의합니다.이것은 완전한 방법입니다.
componentDidMount: function () {
var me = this;
router.get('/', function(req){
me.setState({
component: <MainPage />
});
});
router.get('/realty', function(req){
me.setState({
component: <RealtyPage />
});
});
router.get('/realty/:id', function(req){
me.setState({
component: <RealtyPage id={req.params.id} />
});
});
},
'/' 또는 '/realty'로 이동하면 모두 작동합니다.그러나 'realty/new'로 이동하면 오류 Unaught SyntaxError:app.js:1에 예기치 않은 토큰이 있습니다.그러나 Chrome 디버거는 내 index.html에 해당 오류를 표시하며 브라우저에서도 디버깅할 수 없습니다.이 오류는 '/'가 있는 루트로 이동할 때마다 발생합니다.다른 클라이언트 측 라우터(page.js, rlite, grapnel 등)를 사용하려고 하지만 모두 동일합니다.이 오류에 대해 아는 사람이 있을까요?
UPD: 라우터 컴포넌트의 풀코드입니다.이것으로 라우팅의 page.js가 사용되고 같은 에러가 표시됩니다.
var React = require('react');
var page = require('page');
var MainPage = require('../components/MainPage');
var RealtyPage = require('../components/RealtyPage');
var Router = React.createClass({
getInitialState: function(){
return {
component: <RealtyPage />
}
},
componentDidMount: function () {
var me = this;
page('/', function (ctx) {
me.setState({
component: <MainPage />
});
});
page('/realty', function (ctx) {
me.setState({
component: <RealtyPage />
});
});
page.start();
},
render: function(){
return this.state.component
}
});
module.exports = Router;
"예상하지 않은 토큰" 오류는 여러 가지 이유로 표시될 수 있습니다.저도 같은 문제에 부딪혔는데, 제 경우 생성된 번들을 html로 로드하기 위한 스크립트 태그가 다음과 같았습니다.
<script src="scripts/app.js"></script>
파라미터가 있는 루트로 이동하면(네스트된 루트 또는 여러 세그먼트가 있는 루트에서도 같은 일이 발생), 브라우저는 잘못된 URL을 사용하여 스크립트를 로드하려고 합니다.이 경우 루트 경로는 'user/:id'이며 브라우저는 'http://127.0.0.1:3000/user/scripts/app.js'가 아닌 'http://127.0.1:3000/app.js'로 요청을 했습니다.해결책은 간단합니다.스크립트 태그를 다음과 같이 변경합니다.
<script src="/scripts/app.js"></script>
코드의 상대 경로를 편집하기 위해 "/:uid"를 추가한 후 React-Router 속성을 사용할 때도 동일한 오류가 발생했습니다.
<Route path="/edit/:uid" component={EditPage}/>
이 문제는 컴파일된 javascript 파일 bundle.js에 대한 주요 참조를 로드하는 index.html에서 발생했습니다.
전환했습니다.
<script src="./bundle.js"></script>
로.
<script src="/bundle.js"></script>
그리고 그것은 문제를 즉시 해결했다.
다른 사용자가 이 문제를 겪고 있는 경우 devtools 네트워크 탭에서 서버 응답을 확인하십시오.에러 메세지의 배경에는, javascript/json 파일을 로드하려고 하고 있는데, html 파일이 반환되었기 때문입니다(에러 메세지일 가능성이 있습니다).
HTML 파일은 보통 다음과 같이 시작합니다.
<!doctype html>
<html>
...
브라우저에서는 첫 번째 << >가 표시되며 이는 유효한 JavaScript가 아니기 때문에 혼란스러워지기 때문에 다음 오류 메시지가 출력됩니다.
SyntaxError: Unexpected token <
따라서 위의 경우 OP가 잘못된 파일명을 요구했을 때 오류 페이지가 (HTML로) 반환되어 오류가 발생하였습니다.
다른 사람에게 도움이 되길 바랍니다. :)
소포에 이게 들어있나요?json?
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/preset-react": "^7.0.0",
...
}
Yes)]가 ,.babelrc?그렇지 않은 : 일?? 다음 중 하나:
.babelrc: 붙입니다.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
하려면 , 다음의 순서에 .npm install ★★★★★★★★★★★★★★★★★」npm run dev
출처 : https://github.com/babel/babel-loader/issues/789#issuecomment-491554727
이 경우 예기치 않은 토큰 "<"는 네스트된 경로에서 가져옵니다.중첩된 구성 요소를 읽는 데 시간이 걸립니다.
다음 옵션을 사용할 수 있습니다.
- 메뉴얼에 대해서는, 이 https://reactrouter.com/web/example/nesting 를 참조해 주세요.
- 네스트된 경로를 디폴트 반환을 사용하여 스위치로직으로 만듭니다.이 컴포넌트에서는이 문서를 참조하십시오.
<RealtyPageid={req.params.id}
- 제 경우, 저는 그것을 사용하지 않고 단일 경로를 만들고 리듀서와 함께 파라미터를 보냅니다.
언급URL : https://stackoverflow.com/questions/29718481/unexpected-token-error-in-react-router-component
'programing' 카테고리의 다른 글
| 반응 – 폼 요소 상태를 형제/부모 요소에 전달하는 올바른 방법? (0) | 2023.03.09 |
|---|---|
| AngularJS URL의 모든 슬래시가 %2로 변경되었습니다.f (0) | 2023.03.09 |
| Woocommerce를 수량과 함께 카트 URL에 추가하시겠습니까? (0) | 2023.03.09 |
| 스프링 부트 + JPA2 + 휴지 상태 - 세컨드 레벨 캐시 활성화 (0) | 2023.03.09 |
| Wordpress에서 사이드바 위젯에 사용자 지정 게시물 유형의 단일 무작위 게시물을 표시하려면 어떻게 해야 합니까? (0) | 2023.03.09 |