【第35期】一文学会React-Router开发权限-阿里云开发者社区

概述

React-Router是一个用于构建单页应用（SPA一种常见的应用架构模式，它允许在不刷新整个页面的情况下进行交互式的用户体验）的路由库。它是基于React的JavaScript库，可以帮助我们在应用中实现页面之间的切换和导航。而React-Router作为React生态系统中的路由管理工具，为开发者提供了一种简洁、灵活且强大的方式来处理应用中的页面导航和状态管理。

React Router组件

以下是React-Router的一些核心概念和使用方法的详解。通过使用React-Router，我们可以方便地在React应用中实现页面之间的切换和导航。React-Router提供了一些组件，用于定义路由和处理导航。以下是React-Router的一些核心概念和使用方法的详解：

BrowserRouter和HashRouter：React-Router提供了两种不同的路由器组件，BrowserRouter和HashRouter。BrowserRouter使用HTML5的history API来管理URL，而HashRouter使用URL的hash部分来管理URL。通常情况下，BrowserRouter是更常用的选择，但在某些情况下，如静态网站部署到GitHub Pages上时，HashRouter可能更适合。
Route组件：Route组件用于定义路由规则。它可以根据URL的路径来匹配相应的组件进行渲染。Route组件可以通过path属性指定匹配的路径，通过component属性指定要渲染的组件。
Switch组件：Switch组件用于包裹Route组件，它只会渲染匹配的第一个Route组件。这对于避免多个Route组件同时渲染的情况非常有用。
Link组件：Link组件用于创建导航链接。它会生成一个a标签，并自动处理URL的跳转。Link组件可以通过to属性指定要跳转的URL。
NavLink组件：NavLink组件是Link组件的一个特殊版本。它可以根据当前URL的路径来自动添加一个活动状态的类名，用于样式上的区分。
Redirect组件：Redirect组件用于重定向到其他URL。它可以通过to属性指定要重定向的URL。
withRouter高阶组件：withRouter是一个高阶组件，用于将路由相关的属性注入到组件中。它可以使组件能够访问到路由的相关信息，如当前URL等。

路由组件

在React-Router中，路由组件是用来定义不同路由和页面组件的。通过使用Route组件，可以轻松地将不同的URL路径映射到对应的页面组件上。以下是一个使用React-Router的简单示例：

首先，安装React-Router：

npm install react-router-dom

然后，在你的应用中导入所需的组件和函数：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

接下来，创建你的路由组件和页面组件：

const Home = () => {
  return <h1>Home Page</h1>;
};
const About = () => {
  return <h1>About Page</h1>;
};
const Contact = () => {
  return <h1>Contact Page</h1>;
};

在你的应用中使用Router组件和Route组件来定义路由规则和对应的页面组件：

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

在上面的代码中，我们使用了Link组件来创建导航链接，使用Route组件来定义路由规则和对应的页面组件。Switch组件用于确保只有一个Route组件被渲染。

最后，将App组件渲染到根元素中：

ReactDOM.render(<App />, document.getElementById('root'));

现在，你的应用已经具备了基本的路由功能。当用户点击导航链接时，会根据URL的路径切换到相应的页面组件。这只是一个简单的示例，React-Router还提供了更多高级功能，如嵌套路由、路由参数等。你可以在React-Router的官方文档中了解更多详细信息：https://reactrouter.com/web/guides/quick-start

嵌套路由

React-Router允许我们在应用中使用嵌套路由，以便更好地组织和管理页面结构。下面是一个示例，演示如何在React中使用嵌套路由：

首先，安装React-Router：

npm install react-router-dom

然后，在你的应用中导入所需的组件和函数：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

接下来，创建你的路由组件和页面组件。在这个示例中，我们创建了一个父级页面组件和两个子级页面组件：

const Home = () => {
  return <h1>Home Page</h1>;
};
const About = () => {
  return <h1>About Page</h1>;
};
const Contact = () => {
  return <h1>Contact Page</h1>;
};
const Products = () => {
  return (
    <div>
      <h1>Products Page</h1>
      <ul>
        <li>
          <Link to="/products/1">Product 1</Link>
        </li>
        <li>
          <Link to="/products/2">Product 2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/products/1">
          <h2>Product 1 Details</h2>
        </Route>
        <Route path="/products/2">
          <h2>Product 2 Details</h2>
        </Route>
      </Switch>
    </div>
  );
};

在上面的代码中，我们在Products组件中定义了两个子级路由，分别对应不同的产品详情。在子级路由的定义中，我们使用了Route组件来匹配路径，并在对应的Route组件中渲染产品详情。

在你的应用中使用Router组件和Route组件来定义路由规则和对应的页面组件：

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
          <li>
            <Link to="/products">Products</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/products" component={Products} />
      </Switch>
    </Router>
  );
};

在上面的代码中，我们添加了一个导航链接"Products"，它指向Products组件。当用户点击"Products"链接时，会渲染Products组件，并在该组件中显示产品列表和子级路由。

最后，将App组件渲染到根元素中：

ReactDOM.render(<App />, document.getElementById('root'));

现在，你的应用已经具备了嵌套路由功能。当用户点击导航链接时，会根据URL的路径切换到相应的页面组件，并在子级路由中渲染对应的内容。

动态路由

React动态路由是指在React应用中使用路由来根据不同的URL路径加载不同的组件或页面。动态路由允许我们根据特定的参数或条件来渲染不同的内容。

在React中，可以使用React Router来实现动态路由。React Router是一个用于管理路由的第三方库，它可以帮助我们在React应用中实现单页面应用（SPA）的路由功能。
动态路由可以通过在路由路径中添加参数来实现。例如，我们可以定义一个动态路由路径为/users/:id，其中:id是一个参数，它可以在组件中通过props.match.params.id来获取。

以下是一个使用React Router实现动态路由的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const User = ({ match }) => {
  return <h2>User ID: {match.params.id}</h2>;
};
const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/users/1">User 1</Link>
            </li>
            <li>
              <Link to="/users/2">User 2</Link>
            </li>
            <li>
              <Link to="/users/3">User 3</Link>
            </li>
          </ul>
        </nav>
        <Route path="/users/:id" component={User} />
      </div>
    </Router>
  );
};
export default App;

在上面的示例中，我们定义了一个User组件，它会根据路由路径中的参数渲染不同的用户信息。我们在App组件中使用Link组件来创建导航链接，点击链接会根据不同的用户ID跳转到对应的用户页面。

当访问/users/1时，将会渲染User组件，并且match.params.id的值为1。类似地，访问/users/2时，match.params.id的值为2，以此类推。
通过使用React Router的动态路由功能，我们可以根据不同的URL路径加载不同的组件，实现更灵活和动态的页面渲染。

路由参数

在React中，可以使用路由参数来传递数据或配置信息给组件。路由参数是通过URL路径中的特定部分来定义的，可以在组件中通过React Router来获取和使用这些参数。

以下是在React中使用路由参数的示例：

定义路由路径和参数：

path="/users/:id" component={User} />

在上面的例子中，我们定义了一个路由路径/users/:id，其中:id是一个参数，它可以在组件中通过props.match.params.id来获取。

在组件中获取和使用路由参数：

const User = (props) => {
  const userId = props.match.params.id;
  return <h2>User ID: {userId}</h2>;
};

在User组件中，我们可以通过props.match.params.id来获取路由参数的值，并在组件中使用。
通过这种方式，我们可以根据不同的URL路径传递不同的参数给组件，并根据参数的值来渲染不同的内容。例如，可以根据用户ID来显示不同的用户信息页面。

注意：在使用路由参数时，需要确保路由路径和参数的定义匹配，否则无法正确获取参数的值。另外，如果需要在组件中动态地更新路由参数，可以使用history.push()方法来修改URL路径并传递新的参数。

重定向和异常处理

在React中，可以使用重定向来导航到不同的页面或URL。React Router提供了重定向的功能，可以帮助我们在React应用中进行页面的跳转和导航。

以下是在React中使用重定向的示例：

使用Redirect组件进行重定向：

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
const App = () => {
  return (
    <Router>
      <div>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/404" }
      </div>
    </Router>
  );
};

在上面的示例中，我们使用组件将根路径/重定向到/home。这意味着当访问根路径时，会自动跳转到/home页面。

使用编程式导航进行重定向：

import React from 'react';
import { BrowserRouter as Router, Route, useHistory } from 'react-router-dom';
const App = () => {
  const history = useHistory();
  const handleRedirect = () => {
    history.push('/home');
  };
  return (
    <Router>
      <div>
        <button onClick={handleRedirect}>Go to Home</button>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/404" >
          <NotFound />
        </Route>
      </div>
    </Router>
  );
};

在上面的示例中，我们使用useHistory钩子来获取history对象，然后在点击按钮时使用history.push()方法进行重定向到/home页面。

无论是使用Redirect组件还是编程式导航，重定向都可以帮助我们在React应用中进行页面的跳转和导航。可以根据需要选择适合的方式来实现重定向功能。

高级特性

React Router提供了一些高级特性，可以帮助我们更灵活和强大地管理路由和导航更好地管理和控制路由和导航的行为。可以根据项目的需求选择适合的特性来实现更复杂和强大的路由功能。以下是一些React Router的高级特性：

嵌套路由（Nested Routes）

React Router允许我们在一个组件中嵌套定义子路由。这样可以实现更复杂的页面结构和嵌套导航。例如，可以在用户页面中嵌套定义用户的子页面。

以下是一个使用React Router实现嵌套路由的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => {
  return <h2>Home</h2>;
};
const About = () => {
  return <h2>About</h2>;
};
const Services = () => {
  return (
    <div>
      <h2>Services</h2>
      <ul>
        <li>
          <Link to="/services/web-design">Web Design</Link>
        </li>
        <li>
          <Link to="/services/seo">SEO</Link>
        </li>
        <li>
          <Link to="/services/branding">Branding</Link>
        </li>
      </ul>
      <Route path="/services/web-design" render={() => <div>Web Design Service</div>} />
      <Route path="/services/seo" render={() => <div>SEO Service</div>} />
      <Route path="/services/branding" render={() => <div>Branding Service</div>} />
    </div>
  );
};
const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/services">Services</Link>
            </li>
          </ul>
        </nav>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/services" component={Services} />
      </div>
    </Router>
  );
};
export default App;

在上面的示例中，我们定义了一个Services组件，其中包含了三个子路由：Web Design、SEO和Branding。我们使用Link组件创建导航链接，并通过to属性指定不同的URL路径。
在Services组件中，我们使用Route组件来定义子路由的路径和对应的组件。通过path属性指定子路由的路径，并通过render属性指定对应的组件。
在App组件中，我们使用Route组件来定义根路由和其他顶级路由。根路由使用exact属性确保只有在精确匹配根路径时才会渲染。

通过以上示例，我们可以实现在React应用中使用React Router来实现嵌套路由。可以根据需求定义不同的路由层级和子路由，并在组件中使用Link和Route来创建嵌套的导航链接和路由。

路由守卫（Route Guards）

React Router提供了路由守卫的功能，可以在路由导航之前或之后执行特定的操作。例如，可以使用路由守卫来进行身份验证、权限检查或日志记录等操作。在React Router中，可以使用路由守卫（Route Guards）来实现对路由的访问进行权限控制和其他逻辑判断。通过路由守卫，可以在路由切换之前进行一些操作，如验证用户登录状态、权限验证、重定向等。

以下是一个使用路由守卫的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
const Home = () => {
  return <h2>Home</h2>;
};
const Dashboard = () => {
  return <h2>Dashboard</h2>;
};
const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = true; // 假设用户已登录
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};
const App = () => {
  return (
    <Router>
      <div>
        <Route exact path="/" component={Home} />
        <PrivateRoute path="/dashboard" component={Dashboard} />
      </div>
    </Router>
  );
};
export default App;

在上面的示例中，我们定义了一个PrivateRoute组件作为路由守卫。该组件接受一个component属性，用于指定需要守卫的组件。在render方法中，我们可以根据需要进行权限验证或其他逻辑判断。
在PrivateRoute组件中，我们假设用户已登录，通过isAuthenticated变量来判断用户是否已登录。如果已登录，则渲染指定的组件；如果未登录，则重定向到登录页面。
在App组件中，我们使用PrivateRoute组件来保护Dashboard组件，只有在用户已登录的情况下才能访问。

通过以上示例，我们可以实现在React应用中使用路由守卫来进行权限控制和其他逻辑判断。可以根据需求在路由切换之前进行一些操作，以确保用户有权限访问特定的路由。

动态路由匹配（Dynamic Route Matching）

React Router允许我们在路由路径中使用动态参数来匹配不同的URL。这样可以根据不同的参数值加载不同的组件或页面。例如，可以根据用户ID来加载不同的用户信息页面。

以下是一个使用React Router实现动态路由匹配的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => {
  return <h2>Home</h2>;
};
const User = ({ match }) => {
  const userId = match.params.id;
  return <h2>User ID: {userId}</h2>;
};
const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
          </ul>
        </nav>
        <Route exact path="/" component={Home} />
        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
};
export default App;

在上面的示例中，我们定义了一个User组件，并使用match.params.id来获取路由参数的值。我们在User组件中展示了用户的ID。
在App组件中，我们使用Link组件来创建导航链接，并通过to属性指定了不同的URL路径和参数。当点击链接时，路由会匹配到对应的User组件，并将参数传递给组件。
通过使用:来定义动态参数，我们可以在路由路径中匹配不同的URL，并将参数传递给组件。

通过以上示例，我们可以实现在React应用中使用React Router进行动态路由匹配的功能。可以根据需求定义不同的路由路径和参数，并在组件中获取和使用这些参数。

延迟加载（Lazy Loading）

React Router支持延迟加载组件，可以在需要时按需加载路由组件。这样可以提高应用的性能和加载速度，避免一次性加载所有路由组件。延迟加载（Lazy Loading）是一种优化技术，可以在需要时按需加载组件，而不是在应用初始化时一次性加载所有组件。这可以提高应用的性能和加载速度，特别是当应用中有大量组件或页面时。在React Router中，可以使用React.lazy()函数和Suspense组件来实现延迟加载。

以下是一个使用延迟加载的示例：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
const Contact = lazy(() => import('./components/Contact'));
const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
};
export default App;

在上面的示例中，我们使用React.lazy()函数来延迟加载组件。该函数接受一个返回动态import的函数，用于按需加载组件。
然后，我们使用Suspense组件来包裹需要延迟加载的组件。fallback属性指定了在加载组件时显示的占位符，可以是一个加载动画或任何其他的组件。
在Route组件中，我们使用延迟加载的组件作为component属性的值，这样当访问对应的路由时，该组件会被按需加载。
需要注意的是，延迟加载只能用于默认导出的组件，因此需要确保延迟加载的组件使用了export default导出。

通过以上示例，我们可以实现在React应用中使用延迟加载来按需加载组件。这可以提高应用的性能和加载速度，特别是对于较大的应用或包含大量组件的应用来说，效果更为明显。

路由传参（Route Props）

React Router允许我们通过路由传递参数给组件。可以在路由定义中添加自定义的props，然后在组件中通过props对象来获取这些参数。

以下是一个使用React Router实现路由传参的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => {
  return <h2>Home</h2>;
};
const User = ({ match }) => {
  const userId = match.params.id;
  return <h2>User ID: {userId}</h2>;
};
const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
          </ul>
        </nav>
        <Route exact path="/" component={Home} />
        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
};
export default App;

在上面的示例中，我们定义了一个User组件，该组件通过match.params.id来获取路由参数的值。我们在User组件中展示了用户的ID。
在App组件中，我们使用Link组件来创建导航链接，并通过to属性指定了不同的URL路径和参数。当点击链接时，路由会匹配到对应的User组件，并将参数传递给组件。

通过以上示例，我们可以实现在React应用中使用React Router进行路由传参的功能。可以根据需求传递不同的参数，并在组件中获取和使用这些参数。

路由过渡动画（Route Transitions）

React Router支持在路由切换时添加过渡动画。可以使用第三方库或CSS过渡效果来实现页面切换时的平滑过渡效果。

以下是一个使用React Router实现路由过渡动画的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useHistory, useLocation } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './App.css';
const Home = () => {
  return <h2>Home</h2>;
};
const About = () => {
  return <h2>About</h2>;
};
const App = () => {
  const history = useHistory();
  const location = useLocation();
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <button onClick={() => history.push('/')}>Home</button>
            </li>
            <li>
              <button onClick={() => history.push('/about')}>About</button>
            </li>
          </ul>
        </nav>
        <TransitionGroup>
          <CSSTransition key={location.key} classNames="fade" timeout={300}>
            <Switch location={location}>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </div>
    </Router>
  );
};
export default App;

在上面的示例中，我们使用了CSSTransition和TransitionGroup组件来实现路由切换时的过渡动画。首先，我们引入了react-transition-group库，并在导航按钮上添加了onClick事件来切换路由。
然后，我们将路由组件包裹在TransitionGroup组件中，并使用CSSTransition组件来为每个路由组件添加过渡效果。通过给CSSTransition组件传递key、classNames和timeout属性，我们可以定义过渡动画的行为和样式。
在CSS文件中，我们定义了.fade-enter、.fade-enter-active、.fade-exit和.fade-exit-active四个类名，并通过过渡效果实现了淡入淡出的过渡效果。
这样，当切换路由时，组件会根据定义的过渡动画效果进行平滑的过渡。
需要注意的是，为了使CSSTransition组件正常工作，我们还需要在路由组件外部包裹Switch组件，并将location属性传递给Switch组件。

通过以上示例，我们可以实现在React应用中使用React Router进行路由切换时的过渡动画效果。可以根据需求自定义过渡效果和样式。

案例

案例一

以下是一个使用React Router实现用户权限管理的完整案例：

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom';
const Home = () => {
  return <h2>Home</h2>;
};
const Dashboard = () => {
  return <h2>Dashboard</h2>;
};
const AdminDashboard = () => {
  return <h2>Admin Dashboard</h2>;
};
const Login = ({ setLoggedIn }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = () => {
    // 假设登录验证逻辑
    if (username === 'admin' && password === 'password') {
      setLoggedIn(true);
    }
  };
  return (
    <div>
      <h2>Login</h2>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};
const PrivateRoute = ({ component: Component, loggedIn, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        loggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};
const AdminRoute = ({ component: Component, isAdmin, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAdmin ? (
          <Component {...props} />
        ) : (
          <Redirect to="/dashboard" />
        )
      }
    />
  );
};
const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [isAdmin, setIsAdmin] = useState(false);
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
            {isAdmin && (
              <li>
                <Link to="/admin-dashboard">Admin Dashboard</Link>
              </li>
            )}
          </ul>
        </nav>
        <Route exact path="/" component={Home} />
        <PrivateRoute
          path="/dashboard"
          component={Dashboard}
          loggedIn={loggedIn}
        />
        <AdminRoute
          path="/admin-dashboard"
          component={AdminDashboard}
          isAdmin={isAdmin}
        />
        <Route
          path="/login"
          render={() => <Login setLoggedIn={setLoggedIn} />}
        />
      </div>
    </Router>
  );
};
export default App;

在上面的示例中，我们定义了一个Login组件用于用户登录。在Login组件中，我们使用useState来管理用户名和密码的状态，并在点击登录按钮时验证用户名和密码。
在App组件中，我们使用useState来管理用户登录状态和管理员状态。根据用户登录状态和管理员状态，我们通过PrivateRoute和AdminRoute组件来保护需要权限控制的路由。
PrivateRoute组件用于保护需要登录权限的路由，当用户未登录时会重定向到登录页面。
AdminRoute组件用于保护需要管理员权限的路由，当用户不是管理员时会重定向到普通用户的Dashboard页面。

通过以上示例，我们可以实现在React应用中使用React Router来实现用户权限管理。可以根据用户登录状态和其他权限条件来保护需要权限控制的路由，并进行相应的重定向和逻辑判断。

案例二

以下是一个使用React Router实现动态菜单管理的案例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => {
  return <h2>Home</h2>;
};
const About = () => {
  return <h2>About</h2>;
};
const Services = () => {
  return (
    <div>
      <h2>Services</h2>
      <ul>
        <li>
          <Link to="/services/web-design">Web Design</Link>
        </li>
        <li>
          <Link to="/services/seo">SEO</Link>
        </li>
        <li>
          <Link to="/services/branding">Branding</Link>
        </li>
      </ul>
    </div>
  );
};
const Contact = () => {
  return <h2>Contact</h2>;
};
const App = () => {
  const menuItems = [
    { path: '/', label: 'Home' },
    { path: '/about', label: 'About' },
    { path: '/services', label: 'Services' },
    { path: '/contact', label: 'Contact' },
  ];
  return (
    <Router>
      <div>
        <nav>
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <Link to={item.path}>{item.label}</Link>
              </li>
            ))}
          </ul>
        </nav>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/services" component={Services} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
};
export default App;

在上面的示例中，我们定义了一个menuItems数组，用于存储菜单项的路径和标签。
在App组件中，我们使用menuItems数组来动态生成菜单项。通过map方法遍历数组，创建Link组件来生成菜单链接。to属性使用菜单项的路径，label属性使用菜单项的标签。

通过以上示例，我们可以实现在React应用中使用React Router来动态管理菜单。可以根据需要定义菜单项的路径和标签，并在组件中使用Link组件来生成动态的菜单链接。

案例三

以下是一个使用React Router实现菜单权限控制并包含完整参数的示例：

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom';
const Home = () => {
  return <h2>Home</h2>;
};
const Dashboard = ({ match }) => {
  const { username } = match.params;
  return <h2>Welcome, {username}!</h2>;
};
const AdminDashboard = () => {
  return <h2>Admin Dashboard</h2>;
};
const Login = ({ setLoggedIn, setAdmin }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = () => {
    // 假设登录验证逻辑
    if (username === 'admin' && password === 'password') {
      setLoggedIn(true);
      setAdmin(true);
    } else if (username !== '' && password !== '') {
      setLoggedIn(true);
      setAdmin(false);
    }
  };
  return (
    <div>
      <h2>Login</h2>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};
const PrivateRoute = ({ component: Component, loggedIn, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        loggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};
const AdminRoute = ({ component: Component, isAdmin, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAdmin ? (
          <Component {...props} />
        ) : (
          <Redirect to="/dashboard/user" />
        )
      }
    />
  );
};
const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [isAdmin, setIsAdmin] = useState(false);
  const menuItems = [
    { path: '/', label: 'Home' },
    { path: '/dashboard/user', label: 'User Dashboard' },
  ];
  if (isAdmin) {
    menuItems.push({ path: '/admin-dashboard', label: 'Admin Dashboard' });
  }
  return (
    <Router>
      <div>
        <nav>
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <Link to={item.path}>{item.label}</Link>
              </li>
            ))}
          </ul>
        </nav>
        <Route exact path="/" component={Home} />
        <PrivateRoute
          path="/dashboard/:username"
          component={Dashboard}
          loggedIn={loggedIn}
        />
        <AdminRoute
          path="/admin-dashboard"
          component={AdminDashboard}
          isAdmin={isAdmin}
        />
        <Route
          path="/login"
          render={() => (
            <Login setLoggedIn={setLoggedIn} setAdmin={setIsAdmin} />
          )}
        />
      </div>
    </Router>
  )};export default App;

在上面的示例中，我们使用menuItems数组来定义菜单项，根据用户的权限动态生成菜单。
在App组件中，我们根据用户的权限状态动态更新menuItems数组。如果用户是管理员，我们将添加一个Admin Dashboard菜单项。

通过以上示例，我们可以实现在React应用中使用React Router来实现菜单权限控制，并包含完整参数。可以根据用户登录状态和管理员状态来保护需要权限控制的路由，并根据权限动态生成菜单项。使用路由参数来进行动态显示和处理，并根据需要在菜单中显示完整参数。

【第35期】一文学会React-Router开发权限

概述