前端技术栈(四)：react-router，去中心化式路由

最新推荐文章于 2024-08-18 10:26:11 发布

TurkeyCock

最新推荐文章于 2024-08-18 10:26:11 发布

阅读量1.1k

点赞数 1

分类专栏：前端技术文章标签： react router 去中心化动态路由前端技术栈

本文链接：https://blog.csdn.net/turkeycock/article/details/88413376

版权

本文探讨了React Router v4从中心化到去中心化路由的转变，介绍了动态路由的概念，并详细讲解了<Router>、<BrowserRouter>、<Switch>和<Route>组件的用法，包括匹配属性、渲染方法和路由属性。还提到了导航组件如<Link>、<NavLink>和<Redirect>，以及相关工具库的应用。

摘要由CSDN通过智能技术生成

1.静态路由 vs. 动态路由

在Web前端开发中，我们经常会需要处理页面路由问题。习惯上，路由信息会在一个地方集中配置好，我们可以称之为“静态路由”，或者叫“中心化式路由”。以react-router v3版本为例，代码类似下面这样：

import { Router, Route, IndexRoute, browserHistory } from 'react-router'

const App = () => (
  <Router history={browserHistory}>
    <Route path="/" component={RootPage}>
      <IndexRoute component={HomePage} />
      <Route path="/users" component={UsersPage} />
    </Route>
  </Router>
)

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

可以看到，在程序的顶层组件上配置好了所有路由信息，并通过嵌套关系体现不同的层次。但是，react-router v4版本进行了革命性的改动，使之更加符合React的“组件化”思想，我们可以称之为“动态路由”，或者借用区块链中的术语，称之为“去中心化路由”。用v4版本改写后的代码类似于下面这样：

import { BrowserRouter, Route } from 'react-router-dom'

const App = () => (
  <BrowserRouter>
    <RootPage />
  </BrowserRouter>
)

const RootPage = () => (
  <div>
    <Route path="/" exact component={HomePage} />
    <Route path="/users" component={UsersPage} />
  </div>
)

render(<App