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> |
<NavLink to='/Jsdemob'>Jsdemob</NavLink> |
<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")现在可以进行预览了，也可以顺利的切换页面内容了，说明路由已经起作用了。当然这只是路由最简单的用法
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> |
现在浏览就会出现效果，因为在上一篇文章，我们已经配置了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> |
<NavLink to='/Jsdemob' activeClassName='active'>Jsdemob</NavLink> |
<NavLink to='/Jsdemoc' activeClassName='active'>Jsdemoc</NavLink>
</div>
</div>
)
export default NavBar;现在运行就会看到点击Jsdemob的时候，Jsdemob本身是红色，Jsdemoa是蓝色，Jsdemoc没有点击是默认颜色
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的组件中。
写完后你可以在浏览器中查看这个跳转效果了。
总结:设置404和跳转都要先加入Switch的支持，在制作404时一定记得要把404的Route设置到所有路由的后边。跳转时使用Redirect标签，这个很容易实现。
更多web前端开发知识，请查阅 HTML中文网 ！！
以上就是怎么添加react router？的详细内容，更多请关注0133技术站其它相关文章！
