鍍金池/ 問答/HTML5  HTML/ 更新到React Router4.2后，無法用瀏覽器直接打開跳轉后的頁面

更新到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>
    );
  };
}

首頁
連接點擊
直接訪問

回答
編輯回答
卟乖

你說的這種情況在刷新的時候也存在，比如跳轉到/list下，刷新頁面就無法顯示還報錯。

試一下這種方式：

render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Index}/>
      <Route exact path="/list" component={List}/>
    </Switch>
  </BrowserRouter>,
  document.getElementById('container')
);
2017年9月19日 13:04
編輯回答
蝶戀花

總算問題已經解決，將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...

2017年12月24日 06:12