今日学习内容

1.react路由

路由

React-Router：提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。

React-Router-DOM：提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM。

路由分类

HashRouter （hash模式）
url中会有个#，例如localhost:3000/#，HashRouter就会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个#。刷新不会丢失

BrowserRouter（历史记录模式）
是通过历史记录api来进行路由的切换的很多情况下我们则不是这种情况，我们不需要这个#，因为它看起来很怪，这时我们就需要用到BrowserRouter。刷新会丢失404（上线中会出现问题本地开发中不会）

路由如何搭建?

1.下载：==npm install –save react-router-dom==

2.引用：(在index.js文件) import { BrowserRouter} from ‘react-router-dom’

3.使用：在index.js使用路由模式包裹跟组件

import {BrowserRouter} from "react-router-dom"
ReactDOM.render(
  <BrowserRouter>   //包裹开始标签
      <App />
  </BrowserRouter>  //包裹结束标签
  ,
  document.getElementById('root')
);
复制代码

4.建立页面

我们将建立四个页面分别是weixin.jsx tongxunlu.jsx faxian.jsx wo.jsx

5.将路由导航写成一个组件

import React, { Component } from 'react'
import {Link} from 'react-router-dom'
export default class routerlink extends Component {
    render() {
        return (
            <div>
                <Link to="/weixin">微信</Link>
                <Link to="/tongxunlu">通讯录</Link>
                <Link to="/faxian">发现</Link>
                <Link to="/wo">我</Link>
            </div>
        )
    }
}
复制代码

6.在src下创建自定义文件夹router，在router内创建index.js文件

import React, { Component } from 'react'

//将页面引入进来
import Faxian from '../views/faxian.jsx'
import Tongxunlu from '../views/tongxunlu.jsx'
import Weixin from '../views/weixin.jsx'
import Wo from '../views/wo.jsx'

//将路由导航组件引入进来
import RouterLink from '../components/routerlink'

import {Route} from 'react-router-dom'

export default class index extends Component {
    render() {
        return (
            <div>
                <RouterLink></RouterLink>
                <Route path="/faxian" component={Faxian}/>
                <Route path="/tongxunlu" component={Tongxunlu}/>
                <Route path="/weixin" component={Weixin}/>
                <Route path="/wo" component={Wo}/>
            </div>
        )
    }
}
复制代码

7.在APP.js文件引入router下的index.js文件并使用

import React from 'react';
import Router from './router/index'

function App() {
  return (
    <div>
        <Router/>
    </div>
  );
}

export default App;

复制代码

end：到这里基本的路由就搭建完成啦

但是刚刚用Link标签搭建的路由没有设置class属性，想要设置class属性就必须用react提供的
navlink 方法

废话不多说，闲话不多唠，直接上才艺：

import React, { Component } from 'react'
import {Link,NavLink} from 'react-router-dom'   //引入NavLink方法
export default class routerlink extends Component {
    render() {
        return (
            <div>
                {/* <Link to="/weixin">微信</Link>
                <Link to="/tongxunlu">通讯录</Link>
                <Link to="/faxian">发现</Link>
                <Link to="/wo">我</Link> */}

                <NavLink to="/weixin">微信</NavLink>    //将标签替换成NavLink
                <NavLink to="/tongxunlu">通讯录</NavLink>   //将标签替换成NavLink
                <NavLink to="/faxian">发现</NavLink>    //将标签替换成NavLink
                <NavLink to="/wo">我</NavLink>  //将标签替换成NavLink
            </div>
        )
    }
}

复制代码

那么问题来了，react提供的 NavLink 方法自动设置的class属性是active,那么我们设置自定义名称呢？

来，看这里,我们只需要在标签内添加 activeClassName 属性就ok了

意外情况：如果在vscode的终端中启动项目可能会无效那么就在外部cmd中启动

<NavLink to="/weixin" activeClassName="qiaoyue">微信</NavLink>
<NavLink to="/tongxunlu" activeClassName="qiaoyue">通讯录</NavLink>
<NavLink to="/faxian" activeClassName="qiaoyue">发现</NavLink>
<NavLink to="/wo" activeClassName="qiaoyue">我</NavLink>
复制代码

给路由设置重定向和404页面

重定向：也就是说，进入某个页面时，默认进入哪个路由

404页面：用户网址输入错误时，进入404页面

上代码：

import React, { Component } from 'react'

//将页面引入进来
import Faxian from '../views/faxian.jsx'
import Tongxunlu from '../views/tongxunlu.jsx'
import Weixin from '../views/weixin.jsx'
import Wo from '../views/wo.jsx'
import Diushi from '../views/diushi.jsx'    //引入404页面

//将路由导航组件引入进来
import RouterLink from '../components/routerlink'

import {Route,Switch,Redirect} from 'react-router-dom'

export default class index extends Component {
    render() {
        return (
            <div>
                <RouterLink></RouterLink>
                <Switch>    //Switch是route的唯一渲染，它是为了保证路由只渲染一个路径
                    <Route path="/faxian" component={Faxian}/>
                    <Route path="/tongxunlu" component={Tongxunlu}/>
                    <Route path="/weixin" component={Weixin}/>
                    <Route path="/wo" component={Wo}/>

                    {/* 设置重定向 */}
                    <Redirect from="/" to="faxian" exact></Redirect>
                    {/* 设置404页面 */}
                    <Route component={Diushi}></Route>  //404页面的匹配必须放在最最最后
                </Switch>
            </div>
        )
    }
}

复制代码

二级路由的设置

1.创建二级路由的页面（jsx文件）

2.在需要的页面引入二级路由页面，Route，NavLink，等方法

import React, { Component } from 'react'

//引入二级路由页面
import Twoa from './two/twoa'
import Twob from './two/twob'

//引入路由方法
import {Route,NavLink} from "react-router-dom"

export default class weixin extends Component {
    render() {
        return (
            <div>
                <NavLink to="/weixin/twoa">a页面</NavLink>
                <NavLink to="/weixin/twob">b页面</NavLink>

                <Route path="/weixin/twoa" component={Twoa}></Route>
                <Route path="/weixin/twob" component={Twob}></Route>
            </div>
        )
    }
}

复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端