React之react-router-dom

1:一些区别

1. react-router React Router 核心
2. react-router-dom 用于 DOM 绑定的 React Router
3. react-router-native 用于 React Native 的 React Router
4. react-router-redux React Router 和 Redux 的集成
5. react-router-config 静态路由配置的小助手

2：地址和安装

    https://github.com/ReactTraining/react-router 

    安装：yarn add react-router-dom

3：在React项目中（App.js）引用

import {BrowserRouter,Route} from 'react-router-dom'//引入dom路由

4：简单使用1（App.js中）

{/*路由组件*/}
<BrowserRouter>{/*一个路由*/}
    <div>{/*路由规则*/}
        <Route path='/' exact render={() => <h1>Home</h1>}/>{/*exact表示只有路径完全完全匹配，才渲染*/}
        <Route path='/delete' exact render={() => <h1>Delete</h1>} />
    </div>
</BrowserRouter> 

5:  简单使用2（App.js中）

    5.1：引入组件    

import Home from './pages/Home';
import Detail from './pages/detail';

    5.2：将路由和组件绑定

{/*路由组件*/}
<BrowserRouter>{/*一个路由*/}
    <div>{/*路由规则*/}
        <Route path='/' exact  component={Home}/>{/*exact表示只有路径完全完全匹配，才渲染*/}
        <Route path='/detail' exact component={Detail} />
    </div>
</BrowserRouter>

    5.3：页面之间跳转

<Link    to='/detail'> </Link>

<Link    to='/'> </Link>

6:  路由传参（App.js中）

import Home from './pages/Home';
import Detail from './pages/detail';

{/*路由组件*/}
<BrowserRouter>{/*一个路由*/}
    <div>{/*路由规则*/}
        <Header/>
        <Route path='/' exact  component={Home}/>{/*exact表示只有路径完全完全匹配，才渲染*/}
        <Route path='/detail/:id' exact component={Detail} />{/*可以通过 /detail/1 访问*/}
        <Route path='/login'  exact  component={Login}/>
    </div>
</BrowserRouter>

<Link  key={index} to={'/detail/'+id}> .... </Link>

import {Redirect} from 'react-router-dom';//引入重定向组件

<Redirect to='/login'/>

注意：通过这种方式传参，则组件Detail可以通过this.props.match.params.id获取上一页传递过来的参数