面试题React十八一文学会 React Router,文学社面试的十个问题

一、React Router简介

React Router是一个用于管理React应用中导航和路由的库。它允许开发者在单页面应用SPA中创建多个页面每个页面对应一个不同的URL。React Router的主要特性包括

声明式路由 React Router允许您以声明式的方式定义路由规则使得路由配置更加直观和易于理解。嵌套路由 您可以创建嵌套路由将不同的组件与不同的URL子路径相关联。路由参数 您可以通过路由参数传递数据以便在不同页面之间共享信息。导航 React Router提供了Link组件用于在应用内导航到不同的页面。路由守卫 您可以使用路由守卫来控制访问权限例如需要登录才能访问某些页面。 二、安装和配置React Router

要开始使用React Router首先需要安装它。您可以使用npm或yarn进行安装

npm install react-router-dom

接下来您需要在应用中配置React Router。通常在应用的顶层组件中包装<BrowserRouter>或<HashRouter>以便路由可以正常工作。这里以<HashRouter>为例

import ReactDOM from react-dom/client;import { HashRouter } from react-router-dom;import App from ./App;const root  ReactDOM.createRoot(document.getElementById(root));root.render(    <HashRouter>        <App/>    </HashRouter>);

三、创建和配置路由

在React Router中路由通常由<Route>组件定义。每个<Route>组件表示一个URL模式与相应的组件之间的映射。以下是一个示例

import React from react;import { Route } from react-router-dom;function Home() {  return <h1>Home Page</h1>;}function About() {  return <h1>About Page</h1>;}function NotFound() {  return <h1>Not Found</h1>}function App() {  return (    <div>       <Routes>          <Route path/ element{<Home/>}></Route>          <Route path/about element{<About/>}></Route>          <Route path* element{<NotFound/>}></Route>       </Routes>    </div>  );}export default App;

在上面的示例中<Route>组件用于将URL的根路径“/”映射到Home组件将/about路径映射到About组件。*适用于路径找不到时映射到NotFound组件

四、导航

React Router提供了<Link>组件用于在应用内进行导航。以下是一个示例

import { Link } from react-router-dom;function Navigation() {  return (    <nav>      <ul>        <li>          <Link to/>Home</Link>        </li>        <li>          <Link to/about>About</Link>        </li>      </ul>    </nav>  );}export default Navigation;

在上面的示例中<Link>组件用于创建到不同页面的链接。to属性指定目标URL。

五、嵌套路由

在React Router中如果想要实现嵌套路由我们可以使用
<Route>组件来包裹内部的<Route>组件。例如

function App() {  return (    <div>       <Routes>            <Route path/home element{<Home/>}>              <Route path/home/list element{<HomeList/>}></Route>              <Route path/home/details element{<HomeDetails/>}></Route>            </Route>            <Route path/about element{<About/>}></Route>            <Route path* element{<NotFound/>}></Route>          </Routes>    </div>  );}export default App;

六、路由重定向

在React Router中通常使用<Navigate>组件实现路由的重定向。以下是一个示例

import { Routes, Route, Navigate } from react-router-domfunction App() {  return (    <div>       <Routes>            <Route path/ element{<Navigate to/home />}></Route>            <Route path/home element{<Home/>}>              <Route path/home element{<Navigate to/home/list/>}></Route>              <Route path/home/list element{<HomeList/>}></Route>              <Route path/home/details element{<HomeDetails/>}></Route>            </Route>            <Route path/about element{<About/>}></Route>            <Route path* element{<NotFound/>}></Route>          </Routes>    </div>  );}export default App;

在上面的示例中<Navigate>组件的to属性指定重定向的URL。

七、路由参数

有时您需要从URL中获取参数以便在组件中使用。React Router允许您通过match对象来访问这些参数。以下是一个示例

import React from react;import { Route } from react-router-dom;function UserProfile(props) {  const { match }  props;  const { username }  match.params;  return <h1>Welcome, {username}!</h1>;}function App() {  return (    <div>      <Route path/user/:username component{UserProfile} />    </div>  );}export default App;

在上面的示例中UserProfile组件可以通过match.params访问URL中的username参数。当然这里只是举例了一个路由传参的方式还有更多方式可以参考
React Router官网。