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;