试玩网站源码,厦门今天刚刚发生的新闻,百色网站优化,网络营销的具体形式种类一、react-router是什么
react-router是一个用于管理React应用程序中路由的库。路由是指确定应用程序如何根据URL路径来渲染不同的组件和页面。使用react-router可以将应用程序的不同页面映射到不同的URL路径#xff0c;以及在用户导航时动态地加载适当的组件。这样#xff…一、react-router是什么
react-router是一个用于管理React应用程序中路由的库。路由是指确定应用程序如何根据URL路径来渲染不同的组件和页面。使用react-router可以将应用程序的不同页面映射到不同的URL路径以及在用户导航时动态地加载适当的组件。这样用户在浏览应用程序时可以通过URL直接访问不同的页面并且可以使用浏览器的后退和前进按钮进行导航。react-router提供了路由组件、链接组件和路由控制方式等功能使得在React应用程序中实现路由功能更加方便和灵活。
二、基本用法
React Router 是一个用于在React应用中实现路由功能的库。它可以让我们在不刷新页面的情况下通过改变URL路径来加载不同的组件实现单页应用SPA的路由功能。
下面是一个基本的示例展示了如何使用React Router来设置路由和渲染不同的组件。
首先安装React Router库
npm install react-router-dom然后在你的React组件中导入所需的模块
import React from react;
import { BrowserRouter as Router, Route, Link } from react-router-dom;接下来在你的应用中定义一些组件
const Home () (divh2Home/h2/div
);const About () (divh2About/h2/div
);const Contact () (divh2Contact/h2/div
);然后在你的渲染函数中使用 Router 组件来定义你的路由
const App () (RouterdivnavulliLink to/Home/Link/liliLink to/aboutAbout/Link/liliLink to/contactContact/Link/li/ul/navRoute exact path/ component{Home} /Route path/about component{About} /Route path/contact component{Contact} //div/Router
);这个示例中我们在 nav 元素中定义了一些链接分别指向不同路径然后在 Route 组件中定义了与每个路径匹配时要渲染的组件。
最后将 App 组件渲染到你的页面中
ReactDOM.render(App /, document.getElementById(root));现在当你点击链接时URL路径将随之改变同时对应组件的内容也会被渲染到页面上。举个例子点击 About链接将在页面上显示 “About” 组件的内容。
三、LinkRoute
1. 基本使用
在React Router中Link和Route是两个重要的组件用于实现单页应用中的导航和路由。
Link组件是用于在页面中生成链接的组件。它类似于HTML中的a标签但是在React Router中使用Link组件能够实现类似页面跳转效果而不需要重新加载整个页面。通过使用Link组件可以指定链接的路径并且在点击链接时页面会更新并显示相应的组件内容而不会导致整个页面的刷新。例如
import { Link } from react-router-dom;function MyComponent() {return (divLink to/homeGo to Home/Link/div);
}在上面的示例中当点击Go to Home链接时页面会导航到/home路径并显示与/home路径匹配的组件内容。
Route组件则用于定义路径与组件的对应关系。它会根据当前URL路径来选择渲染哪个组件。每一个Route组件都有一个path属性用于指定路径以及一个component属性用于指定渲染的组件。当URL路径与Route组件的path属性匹配时将会渲染该Route组件的component属性中指定的组件。例如
import { Route } from react-router-dom;function MyComponent() {return (divRoute path/home component{Home} //div);
}上面的示例中当URL路径为/home时将会渲染Home组件。
需要注意的是Route组件通常被嵌套在一个根组件内部以便在整个应用中进行路由的管理。可以使用Switch组件来包裹多个Route组件并且只渲染路径与当前URL匹配的第一个Route组件。这样可以避免多个路由同时匹配到URL路径的情况。
2. exact
在react-router中标签用于定义路由匹配规则。exact属性用于确保路由路径与当前URL完全匹配时才渲染组件。如果没有exact属性当URL包含指定路径以及其他内容时也会渲染对应的组件。
举个例子假设我们有两个标签
Route path/ component{Home} /
Route path/about component{About} /如果没有exact属性当URL为/about/contact时即使路径中包含了/about组件也会被渲染。但是如果添加了exact属性
Route exact path/ component{Home} /
Route exact path/about component{About} /这样当URL为/about/contact时组件不会被渲染因为路径不完全匹配。
使用exact属性可以确保只有当URL与路径完全匹配时才渲染组件可以避免多个路由匹配的情况发生提高路由的准确性和匹配的效率。
3. Link和NavLink
在React-Router中Link和NavLink都是用于创建导航链接的组件但它们有一些区别。 activeClassName/activeStyle: NavLink组件具有activeClassName和activeStyle属性它们可以在链接被激活时为其添加自定义的类名或样式。举例NavLink to/home activeClassNameactiveHome/NavLink isActive: NavLink组件还具有isActive属性它可以用于自定义判断链接是否被激活的逻辑。举例NavLink to/about isActive{isActiveFunc}About/NavLink exact: 当设置exact{true}时NavLink只有在URL与其to属性完全匹配时才会被视为激活状态。举例NavLink to/ exactHome/NavLink
综上所述Link组件可以用于简单的导航链接而NavLink组件具有更多的特性以及自定义激活状态样式的能力。
四、Switch
在React Router中Switch组件用于确保只渲染与当前位置的URL匹配的第一个子组件其他子组件将被忽略。它可以用来实现路由的匹配优先级以及防止多个路由同时被渲染的问题。
Switch组件的作用如下
只渲染与当前URL匹配的第一个Route或Redirect组件忽略其他组件。当遇到与URL匹配的组件后停止渲染其他组件避免多个路由同时被渲染。如果没有与当前URL匹配的组件可以通过Switch的Route组件作为默认路由。
下面是Switch组件的详细使用介绍 渲染第一个匹配的路由 import { Switch, Route } from react-router-dom;function App() {return (SwitchRoute exact path/ component{Home} /Route path/about component{About} //Switch);
}上述代码中可以看到Switch包裹了两个Route组件当URL为/时只有Route exact path/ component{Home} /被渲染而Route path/about component{About} /将被忽略。 实现路由的优先级匹配 import { Switch, Route } from react-router-dom;function App() {return (SwitchRoute path/users/:userId component{User} /Route path/users/new render{() NewUser /} //Switch);
}上述代码中当URL为/users/123时只有Route path/users/:userId component{User} /被渲染而Route path/users/new render{() NewUser /} /将被忽略。这是因为/users/123更精确地匹配/users/:userId所以优先渲染。 默认路由 import { Switch, Route } from react-router-dom;function App() {return (SwitchRoute path/about component{About} /Route path/ render{() DefaultPage /} //Switch);
}上述代码中当URL既不匹配/about也不匹配任何其他定义的路由时只有Route path/ render{() DefaultPage /} /会被渲染作为默认路由的内容。
通过上述的介绍可以看出Switch的作用和使用方法。它通常用于包裹多个路由规则以确保只有一个路由能够被渲染提供更好的路由控制和优先级匹配的功能。
五、动态路由
在React Router中动态路由匹配允许我们为一个路径创建一个带有动态参数的模板。这意味着我们可以通过设置一个通用的路径规则来匹配各种不同的URL并将URL的一部分作为参数传递到我们的组件中。
使用动态路由匹配我们可以轻松地创建可重用的路由组件使我们的应用程序更灵活、模块化和可扩展。
下面是一个使用动态路由匹配的简单示例
首先我们需要引入React Router和所需的组件
import React from react;
import { BrowserRouter, Route, Switch } from react-router-dom;
import Home from ./Home;
import User from ./User;然后我们可以在我们的路由配置中使用动态路由匹配
const App () {return (BrowserRouterSwitchRoute exact path/ component{Home} /Route path/user/:id component{User} //Switch/BrowserRouter);
}在上面的例子中我们定义了两个路由。第一个路由用于匹配根路径/“并将Home组件渲染为其对应的路由。第二个路由使用了动态路由匹配。它匹配以”/user/“开头的路径并将剩余部分作为参数传递给User组件。例如对于路径”/user/1User组件将会被渲染并且可以通过props中的match.params来获取id参数的值。
在User组件中我们可以使用动态参数来执行特定的操作。例如我们可以根据不同的id从数据源中获取相应的用户信息
const User ({ match }) {const { id } match.params;// 根据id从数据源中获取用户信息const user getUser(id);return (divh2User ID: {id}/h2pName: {user.name}/ppEmail: {user.email}/p/div);
}上述例子展示了如何使用React Router的动态路由匹配来根据不同的URL参数渲染相应的组件并在组件中使用这些参数进行相关操作。通过这种方式我们可以轻松地创建可复用的路由组件并提高应用程序的灵活性和可扩展性。
六、useParams
React Router是一个用于构建单页面应用的库它允许开发者根据URL的变化渲染不同的组件。useParams是React Router提供的一个自定义Hook用于获取URL中的参数。
使用useParams可以方便地获取URL中的参数这对于根据不同参数来展示不同内容的页面非常有用。通过使用useParams我们可以轻松地获得路由中的动态路径参数无需手动解析URL字符串。
下面是一个示例演示了如何使用useParams来获取URL中的参数
import React from react;
import { useParams } from react-router-dom;const ProductDetail () {const { id } useParams();return (divh1Product Detail/h1pProduct ID: {id}/p/div);
}export default ProductDetail;在上述示例中我们定义了一个ProductDetail组件。使用useParams从URL中获取到了一个参数id。在组件的渲染过程中我们可以直接使用id变量来显示URL中的ID。
假设我们的路由配置如下
Route path/products/:id component{ProductDetail} /当用户访问/products/123时ProductDetail组件将被渲染并且id参数将被设置为123。这样我们就可以在页面上显示Product ID: 123了。
总结一下useParams是React Router中的一个Hooks用于获取URL中的参数。它使得我们可以方便地从URL中提取参数并在组件中使用这些参数。这样我们就可以根据不同的URL参数来显示不同的内容。
七、useRouteMatch
在React Router中useRouteMatch是一个自定义Hook它用于获取与当前URL匹配的路由信息。它返回一个包含以下属性的对象
path定义在路由配置中的路径模式字符串。url当前匹配的URL字符串。
path和url的区别在于path是在路由配置中定义的路径模式而url则是实际匹配的URL。
举例说明
考虑以下路由配置
SwitchRoute path/users/:userId component{UserDetails} /Route path/users component{UsersList} /
/Switch在用户访问/users/123时我们可以使用useRouteMatch来获取相关信息
import { useRouteMatch } from react-router-dom;function UserDetails() {const match useRouteMatch();console.log(match.path); // /users/:userIdconsole.log(match.url); // /users/123// ...
}function UsersList() {const match useRouteMatch();console.log(match.path); // /usersconsole.log(match.url); // /users// ...
}在UserDetails组件中path将是路由配置中定义的/users/:userId而url将是实际匹配的URL/users/123。而在UsersList组件中path和url将都是/users。
举例说明 下面是一个示例来说明useRouteMatch的用法
import React from react;
import { BrowserRouter as Router, Route, Link, useRouteMatch } from react-router-dom;const Users () {// 使用useRouteMatch获取匹配的路由对象const match useRouteMatch();return (divh2Users/h2ulliLink to{${match.url}/john}John/Link/liliLink to{${match.url}/jane}Jane/Link/li/ul{/* 渲染嵌套的路由 */}Route path{${match.path}/:user} component{User} //div);
};const User () {// 使用useRouteMatch获取匹配的路由对象const match useRouteMatch();const { user } match.params;return div{${user}s profile}/div;
};const App () {return (RouterdivnavulliLink to/usersUsers/Link/li/ul/navRoute path/users component{Users} //div/Router);
};export default App;在上面的示例中我们创建了一个简单的用户管理系统。在Users组件中我们通过调用useRouteMatch来获取匹配的路由对象然后根据匹配对象的url属性来构建用户列表链接。同时在User组件中也使用了useRouteMatch来获取匹配的路由对象并根据匹配对象的params属性来获取当前用户的信息。
通过使用useRouteMatch钩子函数我们可以方便地获取和处理与当前URL匹配的路由信息从而实现更加灵活和强大的路由功能。
八、路由嵌套
在React项目中使用react-router库来管理路由可以实现路由的嵌套。路由的嵌套是指在一个页面中嵌套另一个页面的路由这样可以将页面划分为更小的组件实现更好的代码组织和复用。
下面是一个使用react-router进行路由嵌套的示例
import React from react;
import { BrowserRouter as Router, Route, Link } from react-router-dom;// 定义两个组件
const Home () h2Home组件/h2;
const About () h2About组件/h2;// 定义嵌套路由的组件
const App () {return (RouterdivnavulliLink to/Home/Link/liliLink to/aboutAbout/Link/li/ul/navRoute exact path/ component{Home} /Route path/about component{About} //div/Router);
};export default App;在上面的示例中我们使用了BrowserRouter组件作为根路由器并定义了两个路由组件Home和About。在App组件中使用Link组件来定义导航链接其中to属性指定了链接地址。
在nav中我们定义了两个导航链接Home和About。当点击这些链接时会渲染对应的组件。Route组件的path属性指定了路由的路径component属性指定了对应的组件。
上面的示例中/路径对应了Home组件/about路径对应了About组件。这实现了基本路由的嵌套。
如果需要更深层次的嵌套可以在Home或About组件中继续嵌套子路由。
例如我们可以在Home组件中添加子路由
import React from react;
import { BrowserRouter as Router, Route, Link } from react-router-dom;const Home () {return (divh2Home组件/h2navulliLink to/home/page1Page 1/Link/liliLink to/home/page2Page 2/Link/li/ul/navRoute path/home/page1 component{Page1} /Route path/home/page2 component{Page2} //div);
};const Page1 () h2Page 1/h2;
const Page2 () h2Page 2/h2;const App () {return (RouterdivnavulliLink to/Home/Link/liliLink to/aboutAbout/Link/li/ul/navRoute exact path/ component{Home} /Route path/about component{About} //div/Router);
};export default App;在Home组件中我们添加了两个子路由/home/page1和/home/page2并在nav中添加了对应的导航链接。子路由的路径是基于父路由的所以完整的路径是/home/page1和/home/page2。
这样当访问/home/page1或/home/page2时会渲染对应的子组件Page1和Page2。可以看到我们可以无限层级地嵌套路由来构建复杂的页面结构。
总结 React-Router提供了Route和Link组件来实现路由的嵌套。通过在一个组件的render方法中定义子路由的路径和组件可以实现对子组件的嵌套。可以通过导航链接Link来访问对应的路由并渲染相应的组件。这样可以实现灵活的页面组织和路由控制。
九、路由重定向
在React中可以使用react-router来实现路由的重定向。
要实现路由的重定向可以使用Redirect组件或Route组件的render属性。下面分别介绍这两种方式的使用方法。 使用Redirect组件 首先需要在路由配置中设置一个特殊的路径用于重定向。然后在需要进行重定向的地方添加一个Redirect组件将其to属性设置为目标路径。当用户访问特殊路径时会自动进行重定向。 例如路由配置中设置了一个特殊路径/home并且设置了Redirect组件将其to属性设置为/about import { Redirect } from react-router-dom;function App() {return (RouterSwitchRoute exact path/homeRedirect to/about //RouteRoute path/aboutAbout //Route/Switch/Router);
}当用户访问/home时会自动重定向到/about。 使用Route组件的render属性 可以在Route组件的render属性中编写一个回调函数来根据特定的条件进行重定向。 例如需要根据用户登录状态来判断是否进行重定向。在render属性中编写回调函数根据登录状态进行判断若未登录则重定向到登录页面 import { Route, Redirect } from react-router-dom;function App() {const loggedIn checkIfUserIsLoggedIn(); // 假设已实现一个函数来检查登录状态return (RouterSwitchRoute exact path/home render{() (loggedIn ? (Home /) : (Redirect to/login /))} /Route path/loginLogin //Route/Switch/Router);
}当用户访问/home时会根据登录状态自动进行重定向。
这样可以通过使用Redirect组件或Route组件的render属性来实现路由的重定向。根据实际需求选择其中一种方式即可。
十、自定义link
在React Router中可以通过封装Link组件来实现一些定制化的需求。封装Link组件可以帮助我们简化代码提高代码复用性并且可以根据具体业务需求进行一些特殊处理。
下面是一个简单的Link封装示例
import React from react;
import { Link } from react-router-dom;const CustomLink ({ to, activeOnlyWhenExact, className, activeClassName, children }) {return (Linkto{to}className{${className} ${activeOnlyWhenExact ? activeClassName : }}{children}/Link);
};export default CustomLink;在这个示例中通过定义一个名为CustomLink的组件组件接收了以下几个props
to指定链接的目标URL。activeOnlyWhenExact一个布尔值表示只有在当前URL与目标URL完全匹配时才激活链接。className指定链接的样式类。activeClassName指定链接在激活状态时的样式类。children链接中的内容。
在CustomLink组件中通过使用Link组件来创建链接并传递了适当的参数。className和activeClassName props被合并以便在链接处于激活状态时添加activeClassName样式类。
使用CustomLink组件示例
import React from react;
import { BrowserRouter as Router, Route } from react-router-dom;
import CustomLink from ./CustomLink;const App () {return (RouterdivCustomLink to/ activeOnlyWhenExact{true} activeClassNameactiveHome/CustomLinkCustomLink to/about activeClassNameactiveAbout/CustomLinkCustomLink to/contact activeClassNameactiveContact/CustomLinkRoute exact path/ component{Home} /Route path/about component{About} /Route path/contact component{Contact} //div/Router);
};const Home () h2Home/h2;
const About () h2About/h2;
const Contact () h2Contact/h2;export default App;在这个示例中我们使用了CustomLink组件来代替原始的Link组件。CustomLink组件指定了目标URL和相应的样式类。根据具体的路由匹配情况CustomLink组件会自动添加activeClassName样式类。
这是一个简单的封装示例你可以根据具体需求扩展CustomLink组件并为其添加额外的功能和样式。
十一、404路由
要实现匹配到所有未找到的路由可以使用Switch组件和一个特殊的Route组件来匹配所有未找到的路径。
首先我们需要在Switch组件内部添加所有其他的路由规则确保它们在Route组件之前。然后添加一个特殊的Route组件没有指定path属性它将匹配所有未找到的路径。可以在这个Route组件中处理未找到路径的逻辑。
以下是一个示例代码
import React from react;
import { BrowserRouter as Router, Route, Switch } from react-router-dom;const App () {return (RouterSwitchRoute exact path/ component{Home} /Route path/about component{About} /Route path* component{NotFound} //Switch/Router);
};const Home () {return h1Home page/h1;
};const About () {return h1About page/h1;
};const NotFound () {return h1Page not found/h1;
};export default App;在上面的示例中Switch组件包含了Route组件的几个规则分别是根路径/、/about以及一个没有指定path属性的Route组件。当没有路径与之匹配时它就会匹配到该规则并渲染NotFound组件。
这样当用户访问不存在的路径时将会显示Page not found文本。
十二、route config 代码示例如下
import React from react;
import { BrowserRouter as Router, Switch, Route, Link } from react-router-dom;// 有些人认为统一的路由配置很有价值。
// 路由配置只是数据。React非常擅长将数据映射到组件中Route就是其中一个组件。// 我们的路由配置只是一组逻辑上的“路由”数组包含了path和component属性
// 以相同的方式进行排序就像在Switch内部一样。
const routes [{path: /sandwiches,component: Sandwiches},{path: /tacos,component: Tacos,routes: [{path: /tacos/bus,component: Bus},{path: /tacos/cart,component: Cart}]}
];export default function RouteConfigExample() {return (RouterdivulliLink to/tacosTacos/Link/liliLink to/sandwichesSandwiches/Link/li/ulSwitch{routes.map((route, i) (RouteWithSubRoutes key{i} {...route} /))}/Switch/div/Router);
}// 这是一个专门为Route的包装器它知道如何通过将子路由传递给其渲染的组件的routes属性来处理“子”路由。
function RouteWithSubRoutes(route) {return (Routepath{route.path}render{props (// 通过传递子路由来保持嵌套route.component {...props} routes{route.routes} /)}/);
}function Sandwiches() {return h2Sandwiches/h2;
}function Tacos({ routes }) {return (divh2Tacos/h2ulliLink to/tacos/busBus/Link/liliLink to/tacos/cartCart/Link/li/ulSwitch{routes.map((route, i) (RouteWithSubRoutes key{i} {...route} /))}/Switch/div);
}function Bus() {return h3Bus/h3;
}function Cart() {return h3Cart/h3;
}十三、useHistory
React Router中的useHistory是一个React Hook它用于访问浏览器的历史记录栈并且可以实现路由导航。
useHistory 提供了以下功能
导航到不同的路由通过调用push方法可以将用户导航到一个新的路由。例如
import { useHistory } from react-router-dom;function MyComponent() {const history useHistory();const handleClick () {history.push(/other-route);}return (button onClick{handleClick}Go to other route/button);
}在上面的示例中当用户点击按钮时页面将会导航到/other-route的路径。
替换当前路由通过调用replace方法可以用一个新的路由替换当前的路由。它与push方法的区别在于replace方法会在页面历史记录中替换当前路由而不是在历史记录中添加一个新的条目。例如
import { useHistory } from react-router-dom;function MyComponent() {const history useHistory();const handleClick () {history.replace(/other-route);}return (button onClick{handleClick}Replace current route/button);
}在上面的示例中当用户点击按钮时页面将会用/other-route的路径替换当前的路由。
回退到前一个页面通过调用goBack方法可以回退到前一个页面。例如
import { useHistory } from react-router-dom;function MyComponent() {const history useHistory();const handleGoBack () {history.goBack();}return (button onClick{handleGoBack}Go back/button);
}在上面的示例中当用户点击按钮时页面将会回退到前一个页面。
这些都是useHistory提供的一些常用功能它可以帮助我们在React Router中进行路由导航操作。
十四、useLocation
在React Router中useLocation是一个React Hook它允许您从当前URL中获取当前位置信息。它可以用来访问URL的路径、查询参数以及状态对象。
useLocation常用属性如下: pathname: 表示当前URL的路径部分例如对于URL “https://example.com/products”pathname将是 “/products”。 举例: import { useLocation } from react-router-dom;function MyComponent() {const location useLocation();console.log(location.pathname); // 输出: /productsreturn div.../div;
}search: 表示当前URL的查询参数部分例如对于URL “https://example.com/products?sortprice”search将是 “?sortprice”。 举例: import { useLocation } from react-router-dom;function MyComponent() {const location useLocation();console.log(location.search); // 输出: ?sortpricereturn div.../div;
}hash: 表示当前URL的哈希部分例如对于URL “https://example.com/#section1”hash将是 “#section1”。 举例: import { useLocation } from react-router-dom;function MyComponent() {const location useLocation();console.log(location.hash); // 输出: #section1return div.../div;
}state: 表示与当前URL关联的状态对象。在路由之间传递数据时非常有用。
state属性是一个可以保存任意数据的JavaScript对象用于在路由之间传递数据。它通常用于在路由跳转时传递一些特定的参数或状态。当从一个路由跳转到另一个路由时可以将数据作为state传递给目标路由然后在目标路由中使用useLocation().state来获取这些数据。
例如假设有一个列表页面和一个详细页面当用户点击列表中的某一项时希望跳转到详细页面并传递该项的相关信息。可以在列表页面的路由设置中使用state属性来传递数据
import { Link } from react-router-dom;function ListPage() {const itemList [{ id: 1, name: Item 1 },{ id: 2, name: Item 2 },{ id: 3, name: Item 3 },];return (div{itemList.map(item (Linkkey{item.id}to{{pathname: /detail/${item.id},state: { item } // 将item对象作为state传递给详细页面}}{item.name}/Link))}/div);
}在详细页面的组件中可以使用useLocation().state来获取传递过来的数据
import { useLocation } from react-router-dom;function DetailPage() {const location useLocation();const item location.state.item; // 获取传递过来的item对象return (divh3{item.name}/h3pID: {item.id}/p/div);
}上述例子中点击列表页面中的某一项会跳转到详细页面并传递该项的相关信息即item对象。在详细页面中可以获取到该项的信息并展示出来。
这些属性可以帮助您根据URL的不同部分来执行不同的操作以及在应用程序中根据路由之间的状态传递数据。
十五、withRouter
withRouter 是一个高阶组件Higher-Order Component它可以将包裹的组件赋予路由的功能。React 中的路由可以使用 React Router 来管理React Router 提供了一些组件来帮助我们在应用中实现路由功能例如 Route、Link、Switch 等。
withRouter 的作用是将路由的相关属性如 match、location、history注入为被包裹组件的 props这样被包裹组件就可以直接使用这些属性而无需通过父组件传递或使用 context API。
举个例子假设我们有一个 Person 组件需要根据当前访问的 URL 来显示不同的人员信息。我们可以使用 withRouter 对 Person 组件进行包裹这样它就可以获取到路由相关的属性。
import { withRouter } from react-router-dom;const Person ({ match }) {const { id } match.params;// 根据 id 查询并显示对应的人员信息return (divh2Person Details:/h2pID: {id}/p{/* 其他人员信息 */}/div);
}export default withRouter(Person);在上述例子中我们使用 withRouter 包裹了 Person 组件并通过解构赋值获取到了 match 对象。match 对象包含了一些路由相关的信息如 params、url、path 等。通过 match.params.id 可以获取到当前访问 URL 中的 id 参数然后根据该参数 进行查询或其他操作。
总之withRouter 可以让被包裹组件拥有路由相关的属性从而可以方便地对应用的路由进行操作。
十六、HashRouterBrowserRouter
在React应用中React Router是一个用于管理页面路由的库。它允许开发者在应用中创建多个页面通过URL进行导航。React Router提供了两个主要的路由器组件BrowserRouter和HashRouter。
1. BrowserRouter - BrowserRouter使用HTML5的history API来管理页面的URL这意味着它可以在不刷新整个页面的情况下实现URL的更新和页面的导航。
它通过从URL获取信息来渲染相应的组件。在使用BrowserRouter时需要进行一些服务器的配置来确保在浏览器进行页面刷新时能正确地加载应用的入口点。
举例说明
import React from react;
import { BrowserRouter, Route, Link } from react-router-dom;const Home () h1Home Page/h1;
const About () h1About Page/h1;const App () {return (BrowserRouterdivulliLink to/Home/Link/liliLink to/aboutAbout/Link/li/ulRoute path/ exact component{Home} /Route path/about component{About} //div/BrowserRouter);
}export default App;上述例子中使用BrowserRouter来包裹整个应用。通过Route组件来指定URL和相应的组件Link组件用于导航到不同的URL。
2. HashRouter
HashRouter使用URL中的哈希部分#来管理页面的URL。它不需要使用服务器配置可以直接在静态文件服务器上运行。在使用HashRouter时所有的URL都会包含一个哈希值例如http://example.com/#/about。
举例说明
import React from react;
import { HashRouter, Route, Link } from react-router-dom;const Home () h1Home Page/h1;
const About () h1About Page/h1;const App () {return (HashRouterdivulliLink to/Home/Link/liliLink to/aboutAbout/Link/li/ulRoute path/ exact component{Home} /Route path/about component{About} //div/HashRouter);
}export default App;在上述例子中使用HashRouter来包裹整个应用。URL中的哈希部分例如#/about将被HashRouter解析并根据Route组件的配置来渲染相应的组件。
总结React Router提供了两种路由器组件BrowserRouter和HashRouter用于管理页面的URL和导航。BrowserRouter使用HTML5的history API来管理URLHashRouter使用URL中的哈希部分。选择使用哪个取决于应用的部署环境和需求。
