React Router

一、简介

react router是一个构建基于react应用的路由管理库。允许你在程序中定义不同的路由和导航规则。以实现不同的url路径显示不同的组件。

二、相关技术

javascript 复制代码
<Router>
    <div>
        <ul id = "menu">
            <li><Link to = "/home">Home</Link></li>
            <li><Link to = "/hello">Hello</Link></li>
            <li><Link to = "/about">About</Link></li>
        </ul>
        
        <div id = "page-container">
            <Route path = "/home" component = {Home} />
            <Route path = "/hello" component = {Hello} />
            <Route path = "/about" component = {About} />
        </div>
    </div>
</Router>

Link实现导航跳转

Route 配置路由定义,对应组件会填充父组件。

React Router API

Link -> <Link to = '/about'>About</Link> 普通连接,不会触发浏览器刷新

NavLink -> <NavLink to = '/about' activieClassName = "selected">About</NavLink >

Prompt ->

javascript 复制代码
 <Prompt when = {fromIsHalfFilledOut}  message = "Are you sure you want to leave"/>

Redirect ->

javascript 复制代码
 <Route  exact path = "/" 
  render = {() => (loggedIn ? (<Redirect to "/dashboard"/>):
 (<PublicHomePage/>))} />

url传参

react 组件可以通过 match props 获取Route 中url对应的占位符值。

javascript 复制代码
// 通过match属性获取Route Path中的占位符值
const Topic = ({match}) => (
    <h1>Topic {match.params.id}</h1>
); 

export default class RouterParams extends React.PureComponent{
    render(){
        return (
            <Router>
                <div>
                    <ul id = "menu">
                        <li><Link to = '/topic/1'>Topic 1</Link></li>
                        <li><Link to = '/topic/2'>Topic 2</Link></li>
                        <li><Link to = '/topic/3'>Topic 3</Link></li>
                    </ul>
                    <div id = "page-container">
                        <Route path = "/topic/:id" component = {Topic} />
                    </div>
                </div>
            </Router>
        );
    
    }

}

默认情况下,直接修改浏览器地址是不会触发跳转的,必须通过Link或者其它React routeApi实现跳转。

嵌套路由

1.每个React组件都是路由容器。

2.React Router的声明式语法可以方便的定义嵌套路由。

举个多级目录嵌套路由例子

javascript 复制代码
// 一级目录
export const Category = () => {
    return () => {
        <Router>
            <div>
                <ul id = "menu">
                    <li><Link to = "/category/1">Category 1</Link></li>
                    <li><Link to = "/category/2">Category 2</Link></li>
                    <li><Link to = "/category/3">Category 3</Link></li>
                </ul>
                <div id = "nav-container">
                    <Route path = "/category/:id" component = {SubCategory}>
                </div>
            </div>
        </Router>
    }
}


// 二级目录
export const SecondCategory = ({match}) => {
    return () => {
        <Router>
         <div>
           <ul id = "menu">
             <li><Link to = "/category/${match.params.id}/sub/1">Category 1</Link></li>
             <li><Link to = "/category/${match.params.id}/sub/2">Category 2</Link></li>
             <li><Link to = "/category/${match.params.id}/sub/3">Category 3</Link></li>
           </ul>
           <div id = "page-container">
             <Route path = "/category/:id/sub/:subId" component = {Page}>
           </div>
         </div>            
        </Router>
    }
}


// 页面内容
export const Page = ({match}) =>{
    const data = getPageData(match.params.id, match.params.subid);
    return parseData(data);
}
相关推荐
拉不动的猪5 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程15 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常38 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中43 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js