React-router v4 - GET * url *

반응 라우터 v4를 사용하기 시작했습니다. 내 탐색 링크가있는 내 app.js에 간단한 <Router>이 있습니다 (아래 코드 참조). localhost/vocabulary으로 이동하면 라우터가 나를 올바른 페이지로 리디렉션합니다. 그러나 나중에 다시로드 (F5)를 누르면 (localhost/vocabulary) 모든 콘텐츠가 사라지고 브라우저 보고서 Cannot GET /vocabulary이 표시됩니다. 어떻게 가능합니까? 누군가가 그 문제를 해결할 수있는 단서를 제공 할 수 있습니까?React-router v4 - GET * url *

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)

출처

2017-04-04 exoslav

가능한 중복 /index.html를하는 폴백합니다 [반작용 라우터 URL이 작동하지 않는 경우 새로 고침 또는 수동을 writting] (http://stackoverflow.com/questions/27928372/ 수동으로 새로 고침 또는 작업 중일 때 반응 라우터 URI가 작동하지 않음) – Chris

난 당신이 웹팩을 사용하고 있으리라 믿고있어. 그렇다면 webpack 구성에 몇 가지 사항을 추가하면 문제가 해결됩니다. 구체적으로는 output.publicPath = '/' 및 devServer.historyApiFallback = true입니다. 아래 예제는 ^를 모두 사용하고 새로 고침 문제를 해결하는 webpack 설정입니다. 호기심이 있다면 "왜"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' 
    }) 
    ] 
};

내가 여기에 대한 자세한 내용을 썼다 - Fixing the "cannot GET /URL" error on refresh with React Router (or how client side routers work)

출처

2017-04-04 16:16:03

devServer가 추가되었습니다. { historyApiFallback : true, }, – SKLTFZ

HtmlWebpackPlugin과 index.html을 템플릿으로 사용하지 마십시오. 루트에서 새로 고침 할 때 번들이 주입되지 않습니다. index.html에 script 태그로 bundle.js 스크립트를 직접 삽입하십시오. – peterorum

제게'devServer {historyApiFallback : true}'를 추가했습니다. 이미'publicPath : '/''가 구성되었습니다 –

그냥 사람이 여전히 고민에 대한 타일러의 답변을 보충하기 :

(publicPath를 설정하지 않고) devServer.historyApiFallback: true 내 웹팩에 설정을 추가하기 (404)를 고정/새로 고침/뒤로/앞으로보기 중 오류가 발생하지 않았지만 중첩 된 경로의 단일 수준에만 오류가 발생했습니다. 즉, '/'및 '/ topics'는 정상적으로 작동하기 시작했지만 그 이외의 항목 (예 : '/ topics/whatever')은 새로 고침/등의 경우 404를 던졌습니다.

여기에 수락 된 답변 : Unexpected token < error in react router component이 나에게 마지막으로 누락 된 부분을 제공했습니다. index.html에 번들 스크립트 src에 선도 /을 추가하면이 문제가 완전히 해결되었습니다.

출처

2017-04-19 16:23:01

동일한 문제가 있었지만 webpack을 중지하고 다시 실행 한 후에 수정되었습니다.

, 나는 --history-api-fallback 을 추가 내 웹팩 build 코드의 끝에서 내 package.json 파일을 편집 한에 대한, 그리고 scripts: {

"build": "webpack -d && copy src\\index.html dist\\index.html /y && webpack-dev-server --content-base src --inline --port 3000"

아래에 고정 어떤이 또한 쉬운처럼

출처

2017-09-20 14:55:25

저도 같은 문제가 발생 같았다 Cannot GET /url 오류

참고 : 다음에 --history-api-fallback을 추가 한 후에는 색인 파일이 무엇이든간에 다음과 같은 출력이 표시됩니다.

개

404이의

출처

2018-02-18 21:43:52 Jared

React-router v4 - GET * url *

답변

관련 문제