react-router 4 路由配置问题

这里配置有问题的是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;

然后页面是这样的:

clipboard.png

detail页面是这样的:

clipboard.png

一刷新就报错了:

clipboard.png

重新补上报错信息:

clipboard.png

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

控制台没有报错。

阅读 3.3k
2 个回答

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

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

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

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

找到原因是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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题