请问react-router4嵌套路由F5刷新后404是怎么回事啊

Question

请问react-router4嵌套路由F5刷新后404是怎么回事啊

第一次用react-router4的嵌套路由，写了个demo，发现通过Link组件跳转到子路由正常，但是一刷新就无法渲染了，看了一下控制台，是react的js文件无法找到，请各位大神帮看看这是什么原因导致的啊？是试用姿势不对还是webpack配置不对？

主路由，默认显示Basic组件

# App.js
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Basic from './Basic';
import MyShell from './MyShell';
import './App.scss';

export default class App extends React.Component {
    render() {
      return (
        <BrowserRouter>          
          <Route path="/" exact component={Basic} />
          <Route path="/myshell" component={MyShell} />
        </BrowserRouter>
      );
    }
}

点击Basic组件的Link可以正常访问MyShell组件的两个子路由组件

# Basic.jsx
import React from 'react';
import './App.scss';
import { Link } from 'react-router-dom';

export default class Basic extends React.Component {
    render() {
        return (
          <div className="App">
            <Link to="/myshell">Goto Shell</Link>
            &emsp;
            <Link to="/myshell/sign-in">Goto Shell Sign In</Link>
          </div>
        );
    }
}

# MyShell.jsx
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import './App.scss';

export default class App extends React.Component {
    render() {
        return (  
          <> 
            <Route exact path={`${this.props.match.path}`} component={BasicText} />        
            <Route exact path={`${this.props.match.path}/sign-in`} component={SignIn} />         
          </>   
        );
    }
}

const SignIn = props => (
  <div>
    Sign In
  </div>
);

const BasicText = props => (
  <div>
    Basic
  </div>
);

在/myshell下面按F5刷新，工作正常，但是在/myshell/sign-in路径下刷新，就无法渲染,查看控制台，报GET http://127.0.0.1:8703/myshell/index.js net::ERR_ABORTED 404 (Not Found)错误，也就是说找不到react生成的js文件，所以无法工作。这是哪里的问题啊？

Answer 1

使用browserRouter需要后端配合，因为你f5刷新页面的时候会重新向后端服务器请求html页面，如果后端没有配置相应的路由，就返回了404