반응 라우팅이 작동하지 않습니다.

Question

저는 반응의 초보자입니다. Route tag를 넣을 때 아래와 같은 오류가 나타납니다. 누구든지이 사실을 알고 친절하게 대답을 말해주십시오.

여기 아래에있는 내 JSX 코드입니다.

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import {Router, Route} from 'react-router'; 

class Home extends Component { 
    render(){ 
     return (<h1>Hi123</h1>); 
    } 
} 

render(
    <Router> 
     <Route path="/" component={Home}/> 
    </Router>, 
    document.getElementById('container') 
); 

여기 내 패키지 파일

당신은 당신의 태그에 browserHistory 속성을 추가 할 필요가

{ 
    "name": "routing", 
    "version": "1.0.0", 
    "description": "routing test", 
    "main": "index.js", 
    "scripts": { 
    "watch": "webpack -d --watch", 
    "build": "webpack", 
    "start": "nodemon", 
    "serve": "serve ./public", 
    "dev" : "webpack-dev-server --content-base src --inline --hot" 
    }, 
    "author": "VJ", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.4.0", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.23.0", 
    "serve": "^5.0.2", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.4.1" 
    }, 
    "dependencies": { 
    "history": "^2.0.0", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^4.0.0" 
    } 
} 

Answer 1

입니다. 과 같이 코드를 추가합니다 :

import React, { Component } from 'react'; 
 
import { render } from 'react-dom'; 
 
import createBrowserHistory from 'history/createBrowserHistory'; 
 

 
const history = createBrowserHistory(); 
 

 
class Home extends Component { 
 
    render(){ 
 
     return (<h1>Hi123</h1>); 
 
    } 
 
} 
 

 
render(
 
    <Router history={history}> 
 
     <Route path="/" component={Home}/> 
 
    </Router>, 
 
    document.getElementById('container') 
 
);

을 browserHistory 속성 check out react-router's API docs에 좀 더 정보를 위해.

Answer 2

오늘 이전과 똑같은 문제가있었습니다. 나는 약간의 연구를했으며 반응 라우터에 약간의 업데이트가 있었다. 대신 'react-router-dom'으로 전환하고 여기에서 새 문서를 따랐습니다. https://reacttraining.com/react-router/web/example/basic

그로 인해 문제가 해결되었습니다. 그래서, 당신의 node_modules에서이를 삭제하고 package.json 파일에이 라인을 교체 : 대신를 사용하여

"react-router": "^4.0.0" 

:

"react-router-dom": "^4.0.0" 

(다시 반응 라우터의 이전 버전에 있습니다 롤링 또한 문제를 해결하십시오.) react-router-dom으로 업데이트하는 경우 문서를 확실히 확인하십시오. 가져올 때 BrowserRouter를 라우터로 사용해야합니다. BrowserRouter는 browserHistory를 라우터 구성 요소의 속성으로 추가 할 필요가 없어진 것처럼 보입니다.