什么是react路由

什么是react路由

前端路由的出现要从 ajax 开始，Ajax，全称 Asynchronous JavaScript And XML，是浏览器用来实现异步加载的一种技术方案。有了 Ajax 后，用户交互就不用每次都刷新页面，体验带来了极大的提升。而异步交互体验的更高级版本就是 SPA—— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。

React前端路由(指react-router)是前端在router.js中注册前端路由与组件映射，前端通过Link设置的路由或在浏览输入相应路由引起组件渲染：

触发: react-router中的Link标签

响应: 渲染Rout标签中对应组件

原理: 基于浏览器中hash(React-Router v2之前),history(React-Router v4)

//index.jsclass ListContent extends Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }
  
  render() {
    return (
      <Row>
          <Button>+            <Link to="/topic"> 发布话题 </Link>
          </Button>
      </Row>
    );
  }}
//router.js<Router>
    <div>
      <Header/>
          <Switch>
            <Route exact path="/" component={index} />
            <Route exact path="/topic" component={topic} />
          </Switch>
    </div></Router>

在router.js中header组件会一直存在页面中，而Switch标签中的组件只会在触发后渲染，可简单理解为未触发组件为null，不显示

所以形成了局部渲染

//若触发前端路由'/topic',则index组件不渲染<Router>
    <div>
      <Header/>
          <Switch>
            <Route exact path="/" component={null} />
            <Route exact path="/topic" component={topic} />
          </Switch>
    </div></Router>

本文来自React答疑栏目，欢迎学习！

以上就是什么是react路由的详细内容，更多请关注0133技术站其它相关文章！