Question

我一直在努力寻找原因，以找出为什么在刷新时我的react / express应用程序中的许多路由中只有一个被破坏了。我的前端是 React在端口3000（由create-react-app生成）上运行，而我的后端是一个侦听4001端口的Express应用。

与我的express API通信时，我正在将React-router-dom v4.2.2与BrowserRouter一起使用，以将我的所有客户端路由和代理从3000定向到4001。除一条路线外，所有路线均工作正常，符合预期。

有一个链接指向“ / classroom / live /：classid / view”，该链接在click事件上可以很好地工作。但是，导航到该路由并刷新后，页面完全丢失了，向我发送了404错误的GET请求。

要清楚，我在这里看到了几篇有关此问题的文章，但是在阅读所有文章之后，对我来说解决方案无济于事。我尝试了以下方法：

1）将{historyFallbackAPI：true}添加到Webpack 2）确保路线与其他路线的任何部分都不匹配

再次说明，所有其他路线都可以正常工作。那真是让我大吃一惊。

任何帮助将不胜感激。谢谢。

下面的client package.json：

{
  "name": "wss",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/auth/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/api/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/edit/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/courses/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/class/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/upload/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/files/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/post/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/user/*": {
      "target": "http://localhost:4001",
      "secure": false
    },
    "/preview/*": {
      "target": "http://localhost:4001",
      "secure": false
    }
  },
  "dependencies": {
    "@material-ui/core": "^1.0.0",
    "@material-ui/icons": "^1.0.0",
    "@opentok/client": "^2.14.7",
    "axios": "^0.18.0",
    "escape-string-regexp": "^1.0.5",
    "jbox": "^0.4.8",
    "konva": "^2.1.7",
    "material-design-icons": "^3.0.1",
    "material-ui": "^0.20.1",
    "medium-editor": "^5.23.3",
    "mocha": "^5.0.4",
    "react": "^16.2.0",
    "react-addons-update": "^15.6.2",
    "react-beautiful-dnd": "^7.1.3",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-drag-and-drop": "^2.4.0",
    "react-drag-list": "^1.1.0",
    "react-html-parser": "^2.0.2",
    "react-konva": "^1.7.9",
    "react-quill": "^1.2.7",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "react-scrollspy": "^3.3.5",
    "redux": "^3.7.2",
    "redux-form": "^7.3.0",
    "redux-thunk": "^2.2.0",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-react": "^0.79.1",
    "sortablejs": "^1.7.0",
    "uuid": "^3.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "mocha",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "enzyme": "^3.3.0"
  }
}

index.js（下面是React应用的主要入口点）

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import {createStore,applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import reducer from './reducers/index'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {BrowserRouter} from 'react-router-dom'
import registerServiceWorker from './registerServiceWorker';


export const store = createStore(reducer,applyMiddleware(thunk))

ReactDOM.render(
  <MuiThemeProvider>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </MuiThemeProvider>
  ,document.getElementById('root'));
registerServiceWorker();

下面的App.js文件（所有客户端路由）

import React, { Component } from 'react';
import {Route} from 'react-router-dom'
import {Grid} from 'react-bootstrap'
import NavigationView from './Navigation/NavigationView'
import AccountView from './Account/AccountView'
import CourseBuildView from './Build/Course/CourseBuildView'
import CurrentCourseView from './CurrentCourse/CurrentCourseView'
import LearnView from './Learn/LearnView'
import LiveClassroomView from './LiveClassroom/LiveClassroomView'
import {connect} from 'react-redux'
import {getUser} from '../actions'
import {withRouter} from 'react-router-dom'
import LandingView from './Landing/LandingView'
import QuizBuildView from './Tools/Build/Quiz/QuizBuildView'


class App extends Component {

  componentDidMount(){this.props.getUser()}

  render() {
    const {currentUser} = this.props
    return (
      <div className="App">
        <Grid>
          <Route exact path="/" render={()=>(<LandingView currentUser={currentUser}/>)}/>

          <Route path="/account" render={()=>(<div><NavigationView/><AccountView currentUser={currentUser}/></div>)}/>

          <Route path="/classroom/live/:classid/view" render={()=>(<LiveClassroomView/>)}/>
          {/*ROUTE ABOVE IS DESTROYED ON PAGE REFRESH ^^^^^ NO OTHER ROUTE IS*/}
          {/* -------------------------------------------------------------------- */}
          {/* -------------------------------------------------------------------- */}
          {/* -------------------------------------------------------------------- */}

          <Route path="/teach" render={()=>(<div><NavigationView/></div>)}/>

          <Route path="/courses/:query" render={()=>(<div><NavigationView/></div>)}/>

          <Route exact path ="/build/course/:courseid/:courseinfoid" render={()=>(<CourseBuildView/>)}/>

          <Route exact path ="/build/course/:courseid/:userid/quiz/:toolid" render={()=>(<QuizBuildView/>)}/>

          <Route path = "/course/:userid/:courseid/view" render={()=>(<CurrentCourseView/>)}/>

          <Route path="/learn" render={()=>(<div><NavigationView/><LearnView/></div>)}/>

        </Grid>
      </div>
    );
  }
}

function mapStateToProps(initialState){
  return {
    currentUser: initialState.userReducers.currentUser
  }
}

export default withRouter(connect(mapStateToProps,{getUser})(App));

Answer 1

该路线仅链接了带前缀的快速路线“ class”和“ classroom”的一部分。轮到我不知道的情况下调用API。固定。

React APP上的一条路由在刷新时被破坏

1 个答案: