React复习（11）：React-Router

---

前言

React不同于Angular.js和Ember.js等集成了开发者可能需要的所有功能它并不是一个前端的应用框架，而是一个构建界面的JS库，照书里的话说：你必须选择符合自己需求且必要的部件才能打造一个完美的前端单页应用（取自图灵《深入React技术栈》）。
随着react的版本逐步更新，逐渐衍生出一个新的路由库React Router，直至现在，该路由库已经成为官方认证的路由库了。
为什么要学习路由？
很简单，当你登录你的博客网页时，路由可以记录你登陆的状态，访问哪一篇文章，记录你网页的前进和后退等。
基础路由介绍都在书里，这里只记录写法和实例，加油

一、路由及链接

1.引入的BrowserRouter，相当于根路由
2.引入Routes用来包裹其他子路由

3.Link 相当于不能写样式的a标签，路由跳转操作，写在根路由下，Routes外

4.NavLink相当于可以写样式的Link，与Link位置相同

内部样式写法：

import {Route,BrowserRouter,Link,Routes, NavLink} from 'react-router-dom'
import Home from './routes/Home'
import Demo from './routes/Demo'

function App(){
  return(
    <div>
      <BrowserRouter>
      <Link to="home">Home</Link><br/>
      <Link to="demo">Demo</Link><br/>
      <NavLink 
      style={({isActive})=>{
        return{
          color:isActive?'green':"black"
        }
      }}
      to="home">Home</NavLink><br/>
      <NavLink
       style={({isActive})=>{
        return{
          color:isActive?'green':"black"
        }
      }}
      to="demo">Demo</NavLink>
      <hr />
         <Routes>
           <Route path="home" element={<Home></Home>}></Route>
           <Route path="demo" element={<Demo></Demo>}></Route>
         </Routes>
      </BrowserRouter>
    </div>
  )
}
export default App;

结果展示：

二、嵌套路由

所谓嵌套路由就是类似："home/hello"这类，hello就相当于时home的子路由。
首先，写入路由，嵌套在父路由home内：

添加路由链接：

在父路由组件下给子路由hello占位，使用Outlet:

最后视图：

三、无匹配路由

相当于switch分支语句的default。
1.路由添加
写在所有路由后面。路径为*，即表示一切不在上述路由的路径都走这一路由

2.添加链接

3.添加组件视图部分（略，正常几行完事）
最后结果：

就是随便输入的路径没有匹配到也走default路径：

四、链接视图部分css添加

Link标签并不独占一行，这导致标签们都在一起，链接标签会被翻译成a标签，所以添加css样式时直接对a标签添加就可

然后引入到App.js中即可实现分行排列。

五、url参数

当我们访问某个多页面网站时，我们经常会看到：“pages/1”、"pages/2"等（尤其是各大oj），这种路由写法如下：
1.添加路由，":id"表示目录

2.添加Link

3.创建组件，使用Outlet

4.参数钩子useParams使用，获取id并渲染

在要调用该钩子的位置打印观察其表示的值，即为组件传递过来的参数id

所以只需渲染useParams().id即可渲染参数
代码如下（这里是page组件，是pages的子组件）：

六、索引

点击页面标题，显示其目录页面（即一些子路由）
1.首先渲染目标链接

2.添加路由
路由这里使用的index传递参数

3.添加组件PageIndex
选择在组件中生成链接，因为索引里面的链接会和父路由的链接进行拼接，所以path只需传递数字即可，他会自己拼接上pages

显示结果:点击pages，出现目录

点击某一个目录：

七、搜索参数

对于一段地址例如：“https://editor.csdn.net/md?not_checkout=1&articleId=123312722”,
问号？后面的语句称为搜索语句（query学过的）
useSearchParams钩子西，用来处理搜索 相关语句
1.添加路由
2.添加链接

3.写组件
这里就使用到了钩子useSearchParams，用法与useState相似，传入初始值，返回初始值变量和改变他的逻辑方法。
对input标签添加onChange事件，一但输入内容，触发change事件，获取当前输入的值设置到我们的搜索参数中。

import {useSearchParams} from 'react-router-dom'
function Search(){
    var [search,setSearch]=useSearchParams("")
    function change(e){
        var v=e.target.value
        if(v){
            setSearch({id:v})
        }
        else {
            setSearch({id:""})
        }

    }
    return(
        <div>Search
            <input value={search.id} onChange={(e)=>{change(e)}} type="text" />
        </div>
    )
}

export default Search

结果如下：