react-6 react-router-dom 的简单使用(1) 曾经终败给现在 2022-04-23 11:50 139阅读 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
还没有评论,来说两句吧...