使用withRouter報錯的問題原因及解決辦法

原因是因爲你沒有把你的Router放在最外面，withRouter不可以放在Router的外面。

比如【下方是錯誤的】：

在下面的代碼中如果你在BasicLayout組件中使用withRouter就會報錯：
You should not use <withRouter(BasicLayout) /> outside a <Router>

原因是因爲你將BasicLayout組件寫在了Router外面。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ReactDOM from 'react-dom';
import BasicLayout from './components/common/BasicLayout';
import List from './components/list/List';
import Detail from './components/detail/Detail';
import NotFound from './components/notfound/NotFound';
import './index.css';

const App = () => {
  return (
  	<BasicLayout>
	    <Router>
	      <Switch>
	        <Route exact path="/" component={List} />
	        <Route exact path="/currency/:id" component={Detail} />
	        <Route component={NotFound} />
	      </Switch>
	    </Router>
     </BasicLayout>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

接下來我們來寫個正確的寫法：

正確的寫法：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ReactDOM from 'react-dom';
import Header from './components/common/Header';
import List from './components/list/List';
import Detail from './components/detail/Detail';
import NotFound from './components/notfound/NotFound';
import './index.css';

const App = () => {
  return (
    <Router>
      <BasicLayout>
	      <Switch>
	        <Route exact path="/" component={List} />
	        <Route exact path="/currency/:id" component={Detail} />
	        <Route component={NotFound} />
	      </Switch>
      </BasicLayout>
    </Router>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

BasicLayout組件的內容如下：

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

function BasicLayout(props) {
	console.log({props}) // history,location等等withRouter附加的props就能看到了
	
    return (
        <div>
            xxxxx
        </div>
    );
}

export default withRouter(BasicLayout);

OK，問題解決~