在 Create React App 中,我们可以使用 React Router 来管理页面之间的路由。React Router 是一个流行的第三方库,它可以帮助我们在 React 应用中实现路由功能。
安装 React Router
首先,我们需要安装 React Router。在终端中使用以下命令来安装 React Router:
npm install react-router-dom
在应用中添加路由
在我们的应用中,我们可以使用 <BrowserRouter>
组件来包裹整个应用,并在其中定义路由。例如:
-- -------------------- ---- ------- ------ - -------------- ------ ------ - ---- ------------------- ------ ---- ---- --------- ------ ----- ---- ---------- -------- ----- - ------ - --------------- -------- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- --------- ---------------- -- - ------ ------- ----
在上面的例子中,我们定义了两个路由:一个是根路径 /
对应 Home
组件,另一个是 /about
对应 About
组件。
使用 Link 组件进行导航
为了在应用中进行页面之间的导航,我们可以使用 <Link>
组件。例如:
-- -------------------- ---- ------- ------ - ---- - ---- ------------------- -------- -------- - ------ - ----- ---- --------- ----------------------- --------- ----------------------------- ----- ------ -- - ------ ------- -------
在上面的例子中,我们定义了一个导航栏组件,其中包含两个链接,分别指向根路径和关于页面。
通过以上步骤,我们成功地在 Create React App 中添加了路由功能。您可以根据实际需求,进一步扩展路由配置和页面组件。