React中的路由

离逝的枫

已于 2023-07-11 11:51:47 修改

阅读量643

点赞数

分类专栏： react 文章标签： react.js 前端前端框架

于 2023-07-09 11:08:02 首次发布

本文链接：https://blog.csdn.net/qq_51130780/article/details/131619332

版权

react 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

1.什么是SPA

SPA俗称单页面应用。就类似于我们所看到的网站都集成于一个html文件，然后在网站交互的过程中始终保证在此页面上进行展示。页面标签不进行刷新，给用户一种未跳转的假象，但是也会面临着初次加载慢等。

单页应用程序是一种基于 Web 技术的应用程序架构模式，其中所有的页面加载、渲染和切换都在单个 HTML 页面中完成，而不需要每次切换页面时重新加载整个页面。相反，通过使用 JavaScript 和 AJAX 技术，SPA 在单个页面内动态地加载和更新内容。

在传统的多页应用程序中，每个页面对应一个独立的 HTML 文件，每次切换页面都需要从服务器重新加载整个页面。而在 SPA 中，初始加载时只需要下载一个 HTML 文件，之后的页面切换通过动态加载数据和更新页面的方式进行，大大提高了用户体验和页面加载速度。

SPA 的优点包括：

更快的用户体验：因为只需要加载一次初始页面，后续的页面切换只需要加载数据和更新部分内容，响应更迅速。
减少服务器负载：由于只需要返回数据而不是整个页面，减少了服务器端的压力和带宽消耗。
更流畅的页面切换：通过使用前端路由技术，可以实现无刷新的页面切换，提供更加流畅的用户界面。
更好的交互性：SPA 可以通过 JavaScript 操作 DOM 元素和响应用户事件，实现更丰富的交互效果。
可维护性和可扩展性：通过使用前端框架（如React、Angular、Vue等），可以将应用程序拆分为组件，提高代码的可维护性和可扩展性。

2. 什么是路由

路由就类似于我们所使用的路由器，正是因为有路由的出现，才使用我们能够在单页面应用中实现不同页面的切换，因为路由中存在一组key和value的值。就无需刷新页面。

3.react中的路由

在react中我们需要引入第三方包来进行操作。这里引入的是react-router-dom@5的版本。然后我们可以根据其中提供的各种的API完成单页面的路由切换。

下列分别引入的是路由的模式，路由的链接，以及自定义激活状态的路由连接。下面是在render中渲染的html标签。

import {BrowserRouter,Link,NavLink} from 'react-router-dom'

            <div>
                <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <Header />
                </div>
                </div>
                <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                    {/* <a className="list-group-item active" href="./about.html">About</a>
                    <a className="list-group-item" href="./home.html">Home</a> */}
                    {/* RouteBrowserRouterr:就是利用H5推出的history身上的API
                        HashRouter:就是利用#,也就是锚点 hash值
                    */}

                    {/*NavLink在点击的时候就会去找activeClassName="ss"所指定的class的值，如果不添加默认是active
                        这是因为Link相当于是把标签写死了，不能去改变什么。
                    */}
                    {/* <NavLink  className="list-group-item"  to="/about">About</NavLink>
                    <NavLink className="list-group-item"  to="/home">Home</NavLink> */}

                    {/*将NavLink进行封装，成为MyNavLink,通过props进行传参数，标签体内容是props特殊的一个属性，叫做children */}
                <NavLink  className="list-group-item"  to="/about">About</NavLink>
                    <NavLink className="list-group-item"  to="/home">Home</NavLink> 
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                    <div className="panel-body">
                       {/* 注册路由，也就是写对应的关系 */}
                       {/* 路由可以匹配多个路径,因此可以展示多个组件，但是按道理应该只匹配一个即可，而且多个匹配会很耗费性能
                       Switch:就可以保证路由在匹配到第一个路径之后，就不和继续向下走。 */}
                        <Switch>
                            <Route path="/about"component={About}/>
                            {/* exact={true}：开启严格匹配的模式，路径必须一致 */}
                            <Route   path="/home" component={Home}/>
                            {/* Redirect:如果上面的都没有匹配到，就匹配到这个路径下面 */}
                            <Redirect  to = "/about"/>
                        </Switch>
                    </div>
                    </div>
                </div>
                </div>
            </div>

首先是路由模式。在react中如果我们要使用路由，那么要确保路由模式要完全包裹住link和route。这里为了方便我们可以将路由包裹在最外面的App标签中。这样无论我们在后面怎么添加路由信息。都会保证路由被包裹在路由模式中

ReactDOM.render(

<BrowserRouter>

<App />

</BrowserRouter>

,document.getElementById("root"))

然后就是Link和NavLink。其实这两种归根结底都是一样的。只是后面这种我们可以动态的修改其激活状态的样式。该函数我们需要传递to，也很好理解就是跳转到那个路由上。不过建议其跳转的path都采取小写的写法。而下面的我们可以自定义其对应的路由信息

<Link to='/home'>Home</Link>

<NavLink activeClassName></NavLink>

但在开发过程中我们可能所写的路由信息不止一个，可能会有很多个。因此可能对应的path可能会有重复。这时我们可以使用Switch、当然也需要从react-router-dom中引入。使用它的好处是我们可以避免匹配到合适的path时仍要往下匹配。节约了时间和效率。

然后如果我们想一启动页面就要保证页面跳转到对应的路由上，我们可以使用Redirect，来进行默认路由的跳转。启动项目后对应的path位空串，因此无法匹配到我们所写的页面的路由。所以我们给一个Redirect来进行保底。让他可以默认跳转到对应的路由上。

<Switch>

<Route path="/about"component={About}/>

<Route path="/home" component={Home}/>

<Redirect to = "/about"/>

</Switch>

4.多级路由

当然在开发过程中我们也无法避免有时会出现嵌套路由的出现。其实在实现嵌套路由的时候，我们使用了路由的模糊匹配模式。

我们可以比较一下下面代码的不同，我们可以发现在route的path和link的path也可以不一样。这里就是利用了路由的模糊匹配模式。其实模糊匹配通俗的将就是路由Route的path有啥，你的Link中也必须有啥，且要以Route的path打头才行。像如下代码才能实现跳转到home页面。

那么路由有模糊模式，也会有严格模式，在严格模式下我们所写的path就必须一摸一样才行，但是开启严格模式有时候会影响我们的开发。例如后续的二级路由等可能无法成功的显示出来。

<NavLink className="list-group-item" to="/about">About</NavLink>

<NavLink className="list-group-item" to="/home/12">Home</NavLink>

<Route path="/about"component={About}/>

<Route path="/home" component={Home}/>

<Redirect to = "/about"/>

下面的代码是无法跳转的

<NavLink className="list-group-item" to="/about">About</NavLink>

<NavLink className="list-group-item" to="/hom">Home</NavLink>

<NavLink className="list-group-item" to="/about">About</NavLink>

<NavLink className="list-group-item" to="/1213/home/13">Home</NavLink>

开启严格模式下的路由

<NavLink className="list-group-item" to="/about">About</NavLink>

<NavLink className="list-group-item" to="/home">Home</NavLink>

<Route exact={true} path="/about"component={About}/>

{/* exact={true}：开启严格匹配的模式，路径必须一致 */}

<Route path="/home" component={Home}

5.路由传参

React中路由传参大概有三种，分别是search、params、state。下面将分别讲解其中的传参思路

5.1 params传递参数

第一种传递参数params参数,在Link中我们需要用/属性的形式传递

<Link to={`/home/message/detail/${item.id}/${item.name}`}>{item.message}</Link>

我们可以在对应的链接Link中进行传递参数的操作，当然是通过/属性的形式添加到对应的url后面。然后在路由Route那进行对应参数的接口使用的是/:属性的形式。然后传递到对应页面中的props中的metch中。

<Route path="/home/message/detail/:id/:name" component={detail}></Route>

this.props.match.params

5.2 search传递参数

我们通过search传递参数时，对应的格式为?key=value&key=value的形式来进行传递。因此我们需要在Link中将需要传递的参数按照上述格式进行书写。因此代码如下

<MyNavLink to = "/home/news">News</MyNavLink>

<Switch>

<Route path = "/home/news" component={News} />

<Route path = "/home/message" component={Message} />

<Redirect to="/home/message"/>

</Switch>

这里我们安装一下query-string的包，然后就可以将传递过来的参数修改为对应的数值

// const { search } = this.props.location;

// console.log(search);

// const { id } = qs.parse(search.slice(1));

// const { name, content } = messageList.find((item) => {

// return item.id === id;

// });