react-6 react-router-dom 的简单使用（1）

曾经终败给现在 2022-04-23 11:50 191阅读 0赞

之前我们了解了react-router-dom是路由的组件，下面看看这个路由的组件的使用；

我们之前使用create-react-app 创建了简单的项目目录：my-app-level2，

我们进入创建的项目目录中，使用 npm install --save react-router-dom 下载react-router-dom 这个模块，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70][]

安装完成之后，我们就可以使用这个路由的组件；

我们在 node\_modules目录下找到并且打开下载的路由组件 react-router-dom ,如下：

![20190218134323806.png][]

其中可以使用的路由组件很多，我们测试下相应的路由的使用；

第一个例子： 我们来实现下面这样一种效果，当我们点击 天天天 这个区域的时候，下面显示相应的内容；

当我们点击 地地地 的时候，显示相应的内容，点击 人人人 的时候，显示相应的内容；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1][]

我们这里会用到路由中的  <BrowserRouter/>  <HashRouter>   <Route/>   <Switch/>    <Link/>   这几个组件；

我们创建四个组件，目录如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 2][]

四个组件， heaven(天天天)   human（人人人）     index（主页面）  和  land（地地地） ;

我们把index 组件作为默认的显示的页面挂载到根元素 root 上；

index组件中 index.js 文件的内容：

import React ,{Component} from 'react';
    import {BrowserRouter as Router , Route , Switch , Link} from 'react-router-dom';
    // import {HashRouter as Router, Route , Swtich ,Link} from 'react-router-dom';  
    import Heaven from '../../Pages/Heaven/heaven';
    import Land from '../../Pages/Land/land';
    import Human from '../../Pages/Human/human';
    import './index.css'; 
    
    export default class Index extends React.Component {
        render(){
            return(
                <Router>
                    <div className="style-index">
                        <section className="style-index-item">
                            <Link to="/heaven"><div className="style-index-item-block">天天天</div></Link>
                            <Link to="/land"><div className="style-index-item-block">地地地</div></Link>
                            <Link to="/human"><div className="style-index-item-block">人人人</div></Link>
                        </section>
                        <Switch>
                            <Route path="/heaven" component={Heaven}></Route>
                            <Route path="/land" component={Land}></Route>
                            <Route path="/human" component={Human}></Route>
                        </Switch>
                    </div>
                </Router>
            )
        }
    }

其余三个点击显示的组件的内容基本类似，

heaven.js:

import React , {Component} from 'react';
    import './heaven.css';
    
    export default class Heaven extends React.Component {
        render(){
            return(
                <div>Heaven天天天</div>
            )
        }
    }

human.js:

import React ,{Component} from 'react';
    import './human.css';
    
    export default class Human extends React.Component {
        render(){
            return(
                <div>Human 人人人</div>
            )
        }
    }

land.js:

import React ,{Component} from 'react';
    import './land.css';
    
    export default class Land extends React.Component {
        render(){
            return(
                <div>Land 地地地</div>
            )
        }
    }

我们在src/index.js 文件中，把src/Pages/Index组件渲染到页面中：

src/index.js:

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import Index from './Pages/Index/index';  // (1)引入我们刚才创建的 index 组件
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<Index />, document.getElementById('root')); // (2)挂载刚才引入的组件 index  
    
    serviceWorker.unregister();

这样这个例子就完成了；

我们看看这个 src/Pages/Index/index..js 文件；

首先我们在顶部引入了路由的模块 react-router-dom, 这个模块里很多可以用的组件，首先是BrowerRouter 这个组件，

这里使用了 as 给这个 BrowerRouter 组件换了个名字叫 Router ,其实都是一个东西；

然后引入了 Route 组件，Switch组件 和 Link组件；

import {BrowserRouter as Router , Route , Switch , Link} from 'react-router-dom';

那么怎么使用呢？看下面的代码，我们首先要用 Router 组件，也就是BrowserRouter 组件把我们需要使用路由的地方进行

包裹就可以了，如下代码中所示；然后我们三个点击的区域使用Link包裹起来，并且设定 to 的参数，这个就是跳转的地址；

然后我们点击后要显示的组件放在Route 中，path 设定匹配的地址，component设置 显示的组件；

如果现在我们点击 天天天区域，那么我们设定了 to 的参数是 / heaven，则下面的 3个 Route就会通过 path 的参数去匹配；

结果，第一个<Route > 的 path 等于Link的 to 参数，那么就会显示这个 Heaven 组件；这就是tab选项卡的路由的实现；

export default class Index extends React.Component {
        render(){
            return(
                <Router>
                    <div className="style-index">
                        <section className="style-index-item">
                            <Link to="/heaven"><div className="style-index-item-block">天天天</div></Link>
                            <Link to="/land"><div className="style-index-item-block">地地地</div></Link>
                            <Link to="/human"><div className="style-index-item-block">人人人</div></Link>
                        </section>
                        <Route path="/heaven" component={Heaven}></Route>
                        <Route path="/land" component={Land}></Route>
                        <Route path="/human" component={Human}></Route>
                    </div>
                </Router>
            )
        }
    }

上面的代码我们还可以增加一个<Switch>，我们测试下：

和之前的代码的区别是我们增加了Switch 组件，这个组件有什么作用呢？

我们在组件中重复写了一个 human 的组件，那么如果我点击  人人人 的 区域，那么就会显示两个相应的组件，

如果我们加上Switch 的包裹，则不会显示重复的组件，只会显示一个；

export default class Index extends React.Component {
        render(){
            return(
                <Router>
                    <div className="style-index">
                        <section className="style-index-item">
                            <Link to="/heaven"><div className="style-index-item-block">天天天</div></Link>
                            <Link to="/land"><div className="style-index-item-block">地地地</div></Link>
                            <Link to="/human"><div className="style-index-item-block">人人人</div></Link>
                        </section>
                        <Switch>
                            <Route path="/heaven" component={Heaven}></Route>
                            <Route path="/land" component={Land}></Route>
                            <Route path="/human" component={Human}></Route>
                            <Route path="/human" component={Human}></Route>
                        </Switch>
                    </div>
                </Router>
            )
        }
    }

我们在一开始引入路由组件的时候，使用的是 BrowserRouter  ，我们也可以使用下面这个：

import {HashRouter as Router, Route , Swtich ,Link} from 'react-router-dom';

这个HashRouter 和 BrowserRouter是类似的，但是会有区别；

在地址栏中HashRouter会在地址中增加 \# ，而BrowserRouter 则不会，

在使用的过程中也会因此产生一些问题，需要注意；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70]: /images/20220319/25dac302011f46c39101f93ed8a9f3ea.png
[20190218134323806.png]: /images/20220319/4f4e0619f6da414d8ee78a9280116d4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1]: /images/20220319/cc4c8a34c4744ef2a714f9f082667bcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 2]: /images/20220319/39e897023fef4404a27cc0f8220f128b.png