这里配置有问题的是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
控制台没有报错。
没看到具体报错信息,建议你贴一下,我觉得可能是Router外层容器的问题
你可以试一下:
因为react-router 在 4.4版本之后是不可以将 <Route> 嵌套编写的