React路由

1.安装react-router-dom

在项目命令行中,执行
npm install react-router-dom-S
下载到生产环境依赖中。

2.路由内置组件

  • HashRouter
    表示一个路由的跟容器,将来所有跟路由相关的东西,都要包裹在HashRouter中,一个网站中,只需要使用一次HashRouter就好了。

  • Link
    表示一个路由的连接;

  • Route
    表示一个路由规则;

render(){
        return (
            <HashRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />
                    <Link to="/new">首页</Link>&nbsp;&nbsp;
                    <Link to="/movie/">新闻</Link>&nbsp;&nbsp;
                    <Link to="/about">关于我们</Link>
                    <hr />
                    <Route path="/home" component={HOME} ></Route><hr/>
                    <Route path="/new" component={New} exact></Route><hr/>
                    <Route path="/about" component={About}></Route><hr/>
                </div>
            </HashRouter>
        );
    }

由Route创建的标签,就是路由规则,其中path表示要匹配的路由,component表示要展示的组件。
Route具有两种身份:
1.它是一个路由匹配规则;
2.它是一个占位符,表示将来匹配到的组件都放到这个位置
注意:

  • Link to属性的地址也是/开头,Link在页面渲染的是a标签;
  • Route 组件path地址是以/开头 ,配置component属性,是显示的组件,这个属性不可以大写;

3.嵌套路由

嵌套路由:在路由组件中,使用Link,Route,配置子路由,实现跳转,切换;
下面为一级路由,在一级路由New为路由组件

<Route path="/new" component={ New }></Route>
 render (){
       return(
           <React.Fragment>
          《新闻》
          <ul>
              <li>
                  <Link to="/new/act">今日聚焦</Link>
              </li>
              <li>
                  <Link to="/new/three">三农信息</Link>
              </li>
              <li>
                  <Link to="/new/week">新闻周刊</Link>
              </li>
          </ul>
          <Route path="/new/act" component={Act}></Route>
          <Route path="/new/three" component={Three}></Route>
          <Route path="/new/week" component={Week}></Route>
          
           </React.Fragment>
       )
    }

在这里插入图片描述

4.带参数路由和获取参数

通过配置路由的地址,在Link跳转时

  • Route path路径后面 /:id (key)
  • Link to 路径后面 /top/10 (value)
    接收传值:
  • class类组件,this.props.match.params.属性名
  • 函数组件:形参.match.params.属性名

代码实例:

render(){
        return (
            <HashRouter>
                <div>
                    <h1>网站根目录</h1>
                    <hr />
                    <Link to="/about/add/5497">关于我们</Link>&nbsp;&nbsp;
                    <hr />
                    <Route path="/about/:type/:id" component={Movie} exact></Route>
                </div>
            </HashRouter>
        );
    }

在Route内置组件中,配置path地址:

<Route path="/about/:type/:id" component={Movie}></Route>

在Link内置组件中,配置to属性,进行跳转:

<Link to="/about/active/5497"></Link>

类组件中通过声明周期进行接收this.props传递过来的数据

render(){
        console.log(this);
        return (
            <div>
                电影--{this.props.match.params.type}--{this.props.match.params.id}
            </div>
        );
    }

在这里插入图片描述

### React 路由实现方法 React 本身并不直接提供路由功能,而是通过第三方库(如 `react-router-dom`)来实现页面之间的导航与状态管理。该库提供了多种路由模式和组件,能够满足不同应用场景的需求。 #### 哈希路由模式(HashRouter) 哈希路由使用 URL 中的 `#` 符号作为路径标识符,适用于不支持 HTML5 History API 的浏览器环境。在 React 中可以通过 `HashRouter` 组件启用此模式,并结合 `Route` 和 `Link` 组件进行页面跳转和渲染[^1]。以下是一个基本示例: ```jsx import React from 'react'; import { HashRouter, Route, Link } from 'react-router-dom'; function App() { return ( <HashRouter> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> <hr /> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </div> </HashRouter> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Contact() { return <h2>Contact</h2>; } ``` #### 使用 BrowserRouter 模式 除了哈希路由外,还可以使用基于 HTML5 History API 的 `BrowserRouter` 模式,它能生成更美观、语义化的 URL(如 `/home`)。这种模式依赖服务器端配置以确保刷新时页面正常加载。 #### 配置式路由封装 为了避免在组件中堆积过多路由逻辑,可以将路由配置集中管理。例如创建一个 `routes.jsx` 文件,定义所有路由及其对应的组件,并通过自定义函数处理权限验证等逻辑[^2]。 ```jsx // routes.jsx import { Navigate } from "react-router-dom"; import Login from "./pages/login/login"; import Home from "./pages/home/home"; export const routes = [ { path: "/", navigate: "/home" }, { path: "/login", component: <Login /> }, { path: "/home", component: <Home /> } ]; export const routeGuard = (component, path) => { if (path === "/login") { return component; } else { return localStorage.getItem("token") ? component : <Navigate to="/login" />; } }; ``` #### 嵌套路由路由匹配顺序 React 路由按照注册顺序进行匹配,通常先匹配一级路由,再进入子级路由。通过 `Switch` 和 `Route` 组合可以实现嵌套结构,并结合 `Redirect` 进行默认路径跳转[^3]。 ```jsx import React from 'react'; import { Route, Switch, Redirect } from 'react-router-dom'; import News from './News'; import Message from './Message'; export default class Home extends React.Component { render() { return ( <div> <h3>我是Home的内容</h3> <div> <ul className="nav nav-tabs"> <li><MyNavLink to="/home/news">News</MyNavLink></li> <li><MyNavLink to="/home/message">Message</MyNavLink></li> </ul> <Switch> <Route path="/home/news" component={News} /> <Route path="/home/message" component={Message} /> <Redirect to="/home/news" /> </Switch> </div> </div> ); } } ``` #### 自定义路由实现原理 React Router 底层依赖浏览器的 `history` 对象和 `onpopstate` 事件来监听前进/后退操作。开发者也可以基于 `createHashHistory` 或 `createBrowserHistory` 实现自定义的 `Router` 组件[^4]。 ```jsx import React from 'react'; import { Router } from '../react-router'; import { createHashHistory } from '../history'; class HashRouter extends React.Component { constructor(props) { super(props); this.history = createHashHistory(props); } render() { return ( <Router history={this.history}> {this.props.children} </Router> ); } } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值