怎么添加react router?

React Router路由在开发中时刻都会用到,它是SPA(单页应用)的基础,可以说不会路由系统基本就无法用React进行编程。其实路由可以简单的看作我们平时访问的网址或者路径,这样看有助于你的理解,但是并不正确。

Router包安装:

安装Node.js、npm

然后要打开命令行工具,使用npm来进行安装。

npm install --save react-router react-router-dom

react-router:是基本的router包,里边函的内容较多,但是在网页开发中有很多用不到,现在的市面上的课程讲的基本都是这个包的教程。

react-router-dom:随着react生态环境的壮大,后出现的包,这个包比react-router包轻巧了很多。

注意:其实安装了react-router包就不用安装了react-router-dom包了,这里我们只是为了给大家一个提示,所以安装了两个包。在实际开发中,请根据需要进行安装。安装时使用--save,因为这是要在生产环境中使用的。

我们在/app文件夹下新建一个jsdemo.js页面。然后引进React包,并编写一个A页面的组件。请看下面的代码。

import React from 'react';
export default class jsdemo extends React.Component{
    render(){
        return(
            <div>A默认页面</div>
        );
    }
}

这里我们采用了ES6的类语法,这也是现在React推荐使用的,如果使用老语法会有一条黄色的警告或报错。

写好组件后,引入index.js页面,在头部加入引入语句,并改写渲染代码。

import React from 'react';
import ReactDOM from 'react-dom';
import Jsdemo from './jsdemo';
ReactDOM.render(
    <Jsdemo/>,
    document.getElementById("app")
);

引入完成后,执行npm run dev预览可以看到我们写的A页面的组件。通过上边基本的练习,我们有了一定经验,那么接下来我们仿照上面的方法制作两个新组件,jsdemob和jsdemoc。代码如下:

//jsdemob.js
import React from 'react';
export default class jsdemob extends React.Component{
    render(){
        return(
            <div>B页面</div>
        );
    }
}
//jsdemoc.js
import React from 'react';
export default class jsdemoc extends React.Component{
    render(){
        return(
            <div>B页面</div>
        );
    }
}

写完三个页面组件以后,我们把这三个页面都引入到index.js文件里边。

import Jsdemo from './jsdemo';
import Jsdemob from './jsdemob';
import Jsdemoc from './jsdemoc';

引入和书写路由

三个页面都已经作好,现在就需要路由来切换他们了,先用import引入我们的路由包,这里我们用两个模块,一个是Router(我自己叫它路由器),另一个是Route(我自己叫它路由)。

importi {BrowserRouter as Router , Route} from 'react-router-dom';

然后我们改写文件,增加路由设置。

ReactDOM.render(
    <Router>
        <div>
            <Route exact path="/" component={Jsdemo} />
            <Route  path="/Jsdemob" component={Jsdemob} />
            <Route  path="/Jsdemoc" component={Jsdemoc} />
        </div>
    </Router>,
    document.getElementById("app")
);

注意:这里的exact是精确匹配的意思,比如我们有多层路由进行嵌套时,exact可以帮助我们精确匹配到你想跳转的路由。exact的值为bool型,为true是表示严格匹配,为false时为正常匹配。

我们路由已经设置完毕了,但是我们现在还不能进行切换,那我们就做个切换的组件,命名为:Nav

制作Nav组件

在/app文件夹下新建一个nav.js的文件,先引入react和react-router-dom两个包。

import React from 'React';
import {NavLink} from 'react-router-dom';

编写基本的nav组件:

//nav.js
const NavBar = () =>(
<div>
    <div>
        <NavLink exact to='/'>Jsdemoa</NavLink> |&nbsp;
        <NavLink to='/Jsdemob'>Jsdemob</NavLink> |&nbsp;
        <NavLink to='/Jsdemoc'>Jsdemoc</NavLink>
    </div>
</div>
)
export default NavBar;

组件编写完成后,引入index.js,并添加 <Nav/>标签到代码中:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router , Route} from 'react-router-dom';
import Jspang from './jspang';
import Jspangb from './jspangb';
import Jspangc from './jspangc';
import Nav from './nav';
ReactDOM.render(
    <Router>
        <div>
            <Nav/>
            <Route exact path="/" component={Jsdemo} />
            <Route  path="/Jsdemob" component={Jsdemob} />
            <Route  path="/Jsdemoc" component={Jsdemoc} />
        </div>
    </Router>,
    document.getElementById("app")

现在可以进行预览了,也可以顺利的切换页面内容了,说明路由已经起作用了。当然这只是路由最简单的用法

1.png

NavLink中常用选项

我们初识了React的路由后,并制作了一个小案例。接下来了解一下NavLink标签上的选项。

NavLink使用样式

如果我们想给路由一个样式,这时候我们写了一CSS文件,我们如何才能使用在NavLink上?其实这并不难,不过要配置一下webpack.config.js文件。

先写一个CSS文件(我是直接在/src文件夹下直接创建的),并放在和nav.js一个文件夹下,命名为nav.css。

//nav.css
.blue{
    color:blue;
}

然后用es6的import方法引入到nav.js组件里,并在NavLink上加 className指定CSS类。

//nav.js
import  './nav.css';
<NavLink exact to='/' className="blue"> Jsdemoa</NavLink> |&nbsp;

现在浏览就会出现效果,因为在上一篇文章,我们已经配置了css文件和scss文件的解析。如果webpack还不能对CSS文件进行正确的解析,那你就在看一下我上一篇文章需npm安装style-loader和css-loader的知识点。

直接在NavLink上写样式

除了这种用CSS文件的方式写样式,还可以更直接写行内样式,接下来在NavLink上写样式,看下面的代码。

<NavLink exact to='/' style={{color:'red',fontSize:'50px'}}>Jsdemoa</NavLink>

这种方法虽然直观好用,但是不建议在实际开发中使用,这增加了代码的耦合度,不是一种好的编程方式。

activeClassName

作为一个链接是用激活状态的,激活状态就是当我们处在这个链接时。activeClassName就是设置激活状态的样式,它接受一个类名,我们现在nav.css顶一个active的类,把字体设置为红色。

//nav.css
.blue{
    color:blue;
}
.active{
    color:red;
}

然后改写NavLink标签。

//nav.js
import React from 'React';
import {NavLink} from 'react-router-dom';
import './nav.css';
const NavBar = () =>(
<div>
    <div>
        <NavLink exact to='/' className="blue">Jsdemoa</NavLink> |&nbsp;
        <NavLink to='/Jsdemob' activeClassName='active'>Jsdemob</NavLink> |&nbsp;
        <NavLink to='/Jsdemoc' activeClassName='active'>Jsdemoc</NavLink>
    </div>
</div>
)
export default NavBar;

现在运行就会看到点击Jsdemob的时候,Jsdemob本身是红色,Jsdemoa是蓝色,Jsdemoc没有点击是默认颜色

2.png

404设置和跳转设置

项目中都要设置404页面,也就是当找不到这个路由时我们要跳转的页面。React中的404主要靠Switch组件来完成。接下来我们学习一下Switch相关的知识和有关跳转的知识。

Switch组件的使用

在index.js页面中,在引入路由的地方,我们加入Switch的引入。

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

编写404页面

现在需要一个统一的404页面,这里在/app文件夹下新建一个error.js文件。然后封装成组件,方便路由进行调用。

//error.js
import React from 'react';
export default class error extends React.Component{
    render(){
        return(
            <h2>404</h2>
        );
    }
}

在nav.js页面中加入一个不存在的链接NavLink,为的时让它在错误的时候能自动跳转到404页面上。

//nav.js
<NavLink to='/react' activeClassName='active'>404</NavLink>

下面该主角Switch上场了,改写我们的index.js页面,改为下面的样子。

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, HashRouter, MemoryRouter, Route , Switch ,Redirect}
 from 'react-router-dom';
import Jsdemo from './jsdemo';
import Jsdemob from './jsdemob';
import Jsdemoc from './jsdemoc';
import Nav from './nav';
import Error from './error';
ReactDOM.render(
    //basename的作用是增加一级导航目录
    <Router basename="demo">
        <div>
            <Nav/>
            <Switch>
                <Route exact path="/" component={Jsdemo} />
                <Route  path="/Jsdemob" component={Jsdemob} />
                                       /*canshu和aa是要传递的两个参数对应的名词*/
                <Route  path="/Jsdemoc/:canshu/:aa" component={Jsdemoc} />
                <Redirect from="/redirect" to="/Jsdemob" />
                <Route component={Error} />  //这个一定要在所有连接最后
            </Switch>
        </div>
    </Router>,
   document.getElementById("app")
)

然后到浏览器中进行预览,你会看到当点击404链接时,因为链接地址是我们瞎写的,但是它跳到了error.js页面。注意顺序:错误页面应该在最后面。

引入Redirect组件

在index.js中引入Redirect组件

//index.js
import {BrowserRouter as Router , Route , Switch ,Redirect} from 'react-router-dom';

加入跳转链接

在nav.js里加入一个准备跳转的链接,代码如下。

<NavLink to='/redirect' activeClassName='active'>Redirect</NavLink>

这时候点击这个链接,会跳转到404页面,但是我们希望跳转到jspangb页面。

****加入<Redirect>标签

在index.js文件中,加入<Redirect>标签。

 <Redirect from="/redirect" to="/Jspangb" />

*from:表示来自于什么链接,也就是当链接是redirect时,我们触发跳转命令。

  • to:表示要跳转到的链接,这里是跳转到Jspangb的组件中。

写完后你可以在浏览器中查看这个跳转效果了。

3.png

总结:设置404和跳转都要先加入Switch的支持,在制作404时一定记得要把404的Route设置到所有路由的后边。跳转时使用Redirect标签,这个很容易实现。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是怎么添加react router?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏