나는 사용하기 시작했 반응 라우터 v4. 나는 단순한<라우터>
에 나 app.js 와 함께 몇 가지 탐색의 링크(참조 코드는 아래). 는 경우 탐색하는localhost/어휘
,라우터하세요.오른쪽 페이지입니다. 그러나,누를 때 새로고침(F5)이후(localhost/어휘
)모든 콘텐츠는 사라지고 브라우저에서 얻을 수 없/어휘`. 어떻게 가능할까요? 할 수 있는 누군가가 나에게 어떤 단서를 어떻게 해결하는 것(페이지가 올바르게)?
App.js:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { Switch, Redirect } from 'react-router'
import Login from './pages/Login'
import Vocabulary from './pages/Vocabulary'
const appContainer = document.getElementById('app')
ReactDOM.render(
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/vocabulary">Vocabulary</Link></li>
</ul>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/vocabulary" component={Vocabulary} />
</Switch>
</div>
</Router>,
appContainer)
나는'm 정'다시 사용하는 웹팩. 그렇다면 추가,몇 가지를 당신의 웹팩 config 문제를 해결해야합니다. 특히,출력됩니다.publicPath= '/'
그리고devServer.historyApiFallback=true
. 여기's 예를 들어 웹팩 config 아래는 모두 사용하의^및 수정이 이 문제를 새로 고침한다. 당신이'다시 호기심이"왜",this도움이 될 것입니다.
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
};
썼는데 이것에 대해 더 자세히 여기고"을 얻을 수 없/URL"에 오류가 새로 고침으로 반응 라우터(또는 방법을 클라이언트 측의 라우터는 작업이)
그냥 보충하는 타일러's 에 대답한 사람은 여전히 고민이:
추가devServer.historyApiFallback:진정한
나의 웹팩 config(설정하지 않고publicPath
)고정 404/할 수 없는 오류를 얻을 내가 보고에서 새로고침//앞으로,그러나 단 하나의 수준의 중첩된다. 다시 말해서,"/"와"/주제"작업을 시작했지만 아무 이상(예를들면"/주제/아")여전히 던 404 에서 새로고침/등이 있습니다.
그렇게 받아들이 대답을 여기:https://stackoverflow.com/questions/29718481/unexpected-token-error-in-react-router-component 고 그것은 제 지난 조각습니다. 추가이/
로 번들 script src 에index.html
는 문제를 해결니다.
가 동일한 문제는 무엇을,그것을 고정한 편집 나의패키지입니다.json
파일에서스크립트:{
"build": "webpack -d && copy src\\index.html dist\\index.html /y && webpack-dev-server --content-base src --inline --port 3000"
의 끝에서 나의 웹팩build
코드를 추가-역사-api-대체
이것은 또한 것 같다는 가장 쉬운 솔루션을 할 수 없습니다GET/url 에
오류
참고:다음 시간 당신을 구축 후에 추가-역사-api-대체
주의할 것이 라인에 출력에서는 다음과 같습니다(어떤 index 파일):
404s 것이 대체/index.html
나도 성공과 이에 추가하여...historyApiFallback:true
devServer: {
contentBase: path.join(__dirname, "public"),
watchContentBase: true,
publicPath: "/dist/",
historyApiFallback: true
}
하는 경우 응용 프로그램에서 호스팅하는 정적 파일을 서버를 사용해야 합
import { HashRouter } from 'react-router-dom'
ReactDOM.render((
<HashRouter>
<App />
</HashRouter>
), holder)