react-router-dom的使用

router/index.js

import React from 'react'
import {
		BrowserRouter as Router,
		Switch,
		Route,
		Redirect
} from "react-router-dom";
import App from '../App';
import Home from "../views/home";
import Find from "../views/find";
import Detail from "../views/detail";
import {Provider} from 'react-redux'
import store from '../store'
const router = (
		// Provider這個提供器連接了store,那麼Provider裏面的所有的組件都有能力獲取store裏面的內容了
		<Provider store={store}>
		<Router>
				<App>
						<Switch>
								<Route exact path="/" component={Home}/>
								<Route path="/find" component={Find}/>
								{/* 路由傳參 */}
								<Route path="/detail/:id" component={Detail}/>
								{/* 必須放在Switch中的最後一行當用戶訪問某界面時，該界面並不存在，
									此時用Redirect重定向，重新跳到一個我們自定義的組件裏 */}
								<Redirect from="*" to="/"/>
						</Switch>
				</App>
		</Router>
		</Provider>
);

export default router

對於exact的解釋：

　exact是Route下的一條屬性，一般而言，react路由會匹配所有匹配到的路由組價，exact能夠使得路由的匹配更嚴格一些。

　　exact的值爲bool型，爲true是表示嚴格匹配，爲false時爲正常匹配。

　　如在exact爲true時，’/link’與’/’是不匹配的，但是在false的情況下它們又是匹配的。

　　一個常用的場景是這樣的：

<Route path='/' component={Home} />
<Route path='/page' component={Page}>
//這種情況下，如果匹配路由path='/page'，那麼會把Home也會展示出來。
所以我們經常添加exact來解決上述問題。

<Route exact path='/' component={Home} />
<Route path='/page' component={Page} />

之後我們來到根目錄入口文件index.js：

import router from './router'
ReactDOM.render(router, document.getElementById('root'));

附上App.js的代碼

import React, { Component } from 'react';
import './App.css';
import TabBar from './components/tabBar'
import ToTop from './components/toTop'

class App extends Component {
  render() {
    return (
      <div id="App">
        {/* 是this.props.children屬性。它表示當前App組件的所有子節點。 */}
        {this.props.children}
        <TabBar/>
        <ToTop/>
      </div>
    );
  }
}

export default App;