开始一个React项目（四）路由实例（v4）

最新推荐文章于 2024-05-12 10:46:44 发布

dengdengda

最新推荐文章于 2024-05-12 10:46:44 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react学习文章标签：路由示例 react-router 路由的按需加载 404页面

本文链接：https://blog.youkuaiyun.com/dengdengda/article/details/79120697

本文详细介绍了在React项目中设置路由的过程，包括简单的路由示例、抽离导航、添加404页面、嵌套路由、带参传递、优化策略以及按需加载。通过实例展示了如何在不同场景下合理配置路由，以提高应用的性能和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在开始一个React项目（三）路由基础（v4）中我大概总结了一下web应用的路由，这一篇我会接着上一篇分享一些例子。

简单的路由示例

一个最简单的网站结构是首页和几个独立的二级页面，假如我们有三个独立的二级页面分别为：新闻页、课程页、加入我们，路由配置如下：
index.js:

import React from 'react'
import ReactDom from 'react-dom'

import {
    BrowserRouter as Router,
    Route,
    NavLink,
    Switch
} from 'react-router-dom'

import Home from './pages/Home'
import News from './pages/News'
import Course from './pages/Course'
import JoinUs from './pages/JoinUs'

const App = () => (
    <Router>
        <div>
            <header>
                <nav>
                    <ul>
                        <li><NavLink exact to="/">首页</NavLink></li>
                        <li><NavLink to="/news">新闻</NavLink></li>
                        <li><NavLink to='/course'>课程</NavLink></li>
                        <li><NavLink to="/joinUs">加入我们</NavLink></li>
                    </ul>
                </nav>
            </header>
            <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/news" component={News}/>
              <Route path="/course" component={Course}/>
              <Route path="/joinUs" render={(props) => <JoinUs {
   ...props}/>}/>
            </Switch>
        </div>
    </Router>
)

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

一个简单的路由，我们可以将<NavLink>和<Route>都写在index.js里面，但这会让每一个页面都渲染出导航栏。

抽离导航的路由

假如现在新增了登录页，要求登录页没有导航栏，其它页面有导航栏。
index.js

const App = () => (
    <Router>
        <div>
            <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/login" component={Login}/>
              <Route path="/news" component={News}/>
              <Route path="/course" component={Course}/>
              <Route path="/joinUs" render={(props) => <JoinUs {
   ...props}/>}/>
            </Switch>
        </div>
    </Router>
)

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