react-router 4 路由配置问题

Question

这里配置有问题的是detail页面，带了url参数，但是一刷新就不能正常显示了，求助各位大神

// 路由配置
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';

import App from '../containers/App';

import Home from '../containers/Home';
import Detail from '../containers/Detail';
import Login from '../containers/Login';
import User from '../containers/User';
import NoMatch from '../containers/404';

import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

class AppRouter extends React.Component {
  render() {
    return (
      <Router history={history}>
        <App>
          <Route exact path='/' component={Home} />
          <Route path='/detail/:id' component={Detail} />
          <Route path='/login' component={Login} />
          <Route path='/user' component={User} />
          <Route component={NoMatch} />
        </App>
      </Router>
    );
  }
}

export default AppRouter;

import React from 'react';
import { Link } from 'react-router-dom';

class App extends React.Component {

  constructor(props) {
    super(props);
    
  }

  render() {
    return (
      <div>
        <ul>
          <li><Link to='/'>Home</Link></li>
          <li><Link to='/detail/1'>Detail</Link></li>
          <li><Link to='/user'>User</Link></li>
          <li><Link to='/login'>Login</Link></li>
        </ul>
        {this.props.children}
      </div>
    );
  }
}

export default App;

然后页面是这样的：

detail页面是这样的：

一刷新就报错了：

重新补上报错信息：

就是请求的路径错了，多了个detail

控制台没有报错。

Answer 1

没看到具体报错信息，建议你贴一下，我觉得可能是Router外层容器的问题
你可以试一下：

import {HashRouter,Route} from "react-router-dom";

<HashRouter>
    <App>
        ...
    </App>
</HashRouter>

因为react-router 在 4.4版本之后是不可以将 <Route> 嵌套编写的

Answer 2

找到原因是webpack配置的问题：

module.exports = {
  ...
  output: {
    filename: 'bundle.js'
  }
}
...

没有配置publicPath，所以在http://localhost:8080/detail/1页面请求时，变成了http://localhost:8080/detial/bundle.js，因此页面无法正常显示

module.exports = {
  ...
  output: {
    filename: 'bundle.js',
    publicPath: '/'
  }
}

配置加上publicPath: '/'，重启，ok