React之react-router-dom

拼搏现实的明天。 2022-05-20 06:08 174阅读 0赞

##### 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][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：页面之间跳转

##### 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>

import {
      Redirect} from 'react-router-dom';//引入重定向组件
    
    <Redirect to='/login'/>

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

[https_github.com_ReactTraining_react-router]: https://github.com/ReactTraining/react-router