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

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

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

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

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

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

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

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

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

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

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

四个组件， 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 则不会，

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

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

猜你喜欢