React-Router 如何解决嵌套路由的问题？-JavaScript中文网-JavaScript教程资源分享门户

随着前端应用复杂度的提升，很多 web 应用已经不仅是单纯的几个页面的展示，而是需要多级嵌套的页面结构。这时候，前端路由的管理问题就变得尤为重要。React-Router 是 React.js 官方提供的路由管理工具，能够帮助我们在单页面应用中处理路由，其中也包括了解决嵌套路由管理的问题。

嵌套路由的问题

嵌套路由可以理解为类似于文件夹嵌套的概念，一个页面中包含了多个子页面，而这些子页面也可能包含其它子页面。这个过程有些像是树形结构的展开。

在一个简单的嵌套路由结构中，我们常常会遇到这样的问题：

如何保证路由变化后，路由器能够正确的展示嵌套页面？
在嵌套路由中，如何动态地生成链接？

这两个问题都需要 React-Router 提供的一些技术手段来解决。

嵌套路由的解决

嵌套路由的定义

React-Router 定义嵌套路由是比较简单的，例如我们要定义一个主页面和两个子页面，分别为 /about 和 /contact。在路由定义文件中，可以这样定义：

import { Route } from 'react-router-dom';

<Route path='/home'>
    <Route exact path='/home/about' component={AboutPage} />
    <Route exact path='/home/contact' component={ContactPage} />
</Route>

在这个路由定义中，我们首先定义了一个主页面 /home。然后，针对 /home 这个页面，我们定义了两个子页面 about 和 contact。在 React-Router 中，我们使用 Route 组件来实现这一点。在这里，我们要使用嵌套的方式来定义路由。这样，在一个页面嵌套多个页面时，就可以将定义路由放入主页面，将子页面的路由在主页面中嵌套完成。在这个例子中，about 和 contact 页面的路由都是基于 /home 的，即嵌套在 /home 页面之中。

嵌套路由的展示

在路由的定义中，我们定义了嵌套路由。但是如何展示这个路由呢？这需要使用到 props.children 属性。

在一个嵌套的页面中，如何展示子页面？

<div>
    {this.props.children}
</div>

在这个代码中，我们使用 this.props.children 展示了子页面的内容。

在路由管理的时候，我们可以将子页面的路由定义在父页面的 Route 属性中。然后，通过使用 {props.children} 展示组件即可：

import { Route } from 'react-router-dom';

const HomePage = props => (
    <div>
        <h1>Welcome to my website!</h1>
        {props.children}
    </div>
);

const AboutPage = () => <div>About Page!</div>;

const ContactPage = () => <div>Contact Page!</div>;

const App = () => (
    <div>
        <Route exact path='/' component={HomePage}>
            <Route path='/about' component={AboutPage} />
            <Route path='/contact' component={ContactPage} />
        </Route>
    </div>
);

在这个代码中，我们首先定义了一个首页 HomePage。在 HomePage 中，我们使用了 {props.children} 来展示子页面的内容。然后，我们通过在 Route 属性中定义子页面的路由，完成了子页面的展示。

嵌套路由的链接

在一个页面中，如何生成动态链接呢？

在嵌套路由中，我们使用 Link 组件来实现这一点。例如，我们要将 AboutPage 页面链接到 /home/about 路由上：

import { Link } from 'react-router-dom';

const AboutPage = () => (
    <div>
        <h2>About Page</h2>
        <Link to='/home/about'>About Us</Link>
    </div>
);

在这个代码中，我们使用了 Link 组件来将其链接到 /home/about。这个链接是动态的，因为我们在 {Link} 中使用的是路由定义的相对路径，而不是绝对路径。

总结

在这篇文章中，我们介绍了 React-Router 如何解决嵌套路由的问题。我们首先介绍了嵌套路由的定义，然后介绍了嵌套路由在组件中如何展示，最后介绍了如何生成动态链接。这些技术手段都是 React-Router 提供给我们的，能够帮助我们更好地管理路由。嵌套路由的技术点有些多，但如果你能够掌握嵌套路由，那么你就能够更好地应对 web 应用中管理路由的问题了。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65909a3feb4cecbf2d5ec5a8