更新到React Router4.2后,无法用浏览器直接打开跳转后的页面

可以在页面中进行跳转且内容有变更,浏览器地址也有变更
但是如果将此时的跳转后的浏览地址在新浏览器中“直接”访问是无法进行打开的,Cannot GET 错误。
我其实最终想要的效果是,当输入不同url地址,显示的界面是不同的。目前还有个问题是跳转后还保留了上面的头部信息

其他:
1.使用的是 "webpack-dev-server": "^2.11.0" 启动
webpack-dev-server --content-base src --inline --hot
2."react-router-dom": "^4.2.2"

代码:
root.js

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import ComponentList from './components/list';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
export default class Root extends React.Component{
  render(){
    return(
      <Router>
        <div>
          <ul>
            <li><Link to="/">Index</Link></li>
            <li><Link to="/list">List</Link></li>
          </ul>
          <hr />
          <Route exact path="/" component={Index} />
          <Route exact path="/list" component={ComponentList} />

        </div>
      </Router>
    );
  };
}
ReactDOM.render(<Root/>,document.getElementById('example'));

index.js

var React = require('react');
export default class Index extends React.Component{
  render(){
    return(
      <div>
            Index
      </div>
    )
  }
}

list.js

import React from 'react';
export default class ComponentList extends React.Component{
  render(){
    return(
      <div>
        <h2>这个是列表页面</h2>
      </div>
    );
  };
}

首页
连接点击
直接访问

阅读 3.7k
2 个回答
✓ 已被采纳新手上路,请多包涵

总算问题已经解决,将BrowserRouter修改为HashRouter
原来方式:

import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

修改为:

import {HashRouter as Router,Route,Link} from 'react-router-dom';

其他代码不必变更,官方例子https://reacttraining.com/rea...

你说的这种情况在刷新的时候也存在,比如跳转到/list下,刷新页面就无法显示还报错。

试一下这种方式:

render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Index}/>
      <Route exact path="/list" component={List}/>
    </Switch>
  </BrowserRouter>,
  document.getElementById('container')
);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题