是的,React Router v4 及更高版本鼓励将子路由移动到单独的模块中
例如,假设我们有一个博客应用程序,其中包括主页、关于页面和博客文章的页面。我们可以将其组织为:
/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
示例:
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 匹配的子路由:
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;
通过将子路由移动到单独的模块中,我们可以使代码更加模块化和可维护。
领取专属 10元无门槛券
手把手带您无忧上云