首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React路由是否将子路由移动到单独的模块?

是的,React Router v4 及更高版本鼓励将子路由移动到单独的模块中

例如,假设我们有一个博客应用程序,其中包括主页、关于页面和博客文章的页面。我们可以将其组织为:

代码语言:javascript
复制
/src
  /components
    /App
      - App.js
      - App.css
    /Home
      - Home.js
      - Home.css
    /About
      - About.js
      - About.css
    /Blog
      - Blog.js
      - Blog.css
  /routes
    - Home.js
    - About.js
    - Blog.js
  - index.js

在这个例子中,我们将每个路由处理为单独的模块,并将这些模块放置在src/routes文件夹中。App.js 是应用程序的主组件,它将渲染与当前 URL 匹配的子路由组件。

这是一个简单的src/routes/Home.js 示例:

代码语言:javascript
复制
import React from 'react';
import { Route, Link } from 'react-router-dom';
import Home from '../components/Home/Home';

const Routes = () => (
  <Route exact path="/" component={Home} />
);

export default Routes;

src/App.js 中,我们可以使用<Switch><Route> 组件来渲染与当前 URL 匹配的子路由:

代码语言:javascript
复制
import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Routes from './routes/Home';
import RoutesAbout from './routes/About';
import RoutesBlog from './routes/Blog';

const App = () => (
  <div className="App">
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/blog">Blog</Link>
        </li>
      </ul>
    </nav>

    <Switch>
      <Route path="/about" component={RoutesAbout} />
      <Route path="/blog" component={RoutesBlog} />
      <Route path="/" component={Routes} />
    </Switch>
  </div>
);

export default App;

通过将子路由移动到单独的模块中,我们可以使代码更加模块化和可维护。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券