美文网首页
react路由的配置

react路由的配置

作者: 幸宇 | 来源:发表于2019-08-04 10:41 被阅读0次

1、找到官方文档 https://reacttraining.com/react-router/web/example/basic

2、安装  cnpm install react-router-dom --save


3、找到项目的根组件引入react-router-dom

   import { BrowserRouter as Router, Route, Link } from "react-router-dom";

4、复制官网文档根组件里面的内容进行修改  (加载的组件要提前引入)


     <Router>

            <Link to="/">首页</Link>

            <Link to="/news">新闻</Link>

            <Link to="/product">商品</Link>


           <Route exact path="/" component={Home} />
           <Route path="/news" component={News} />    
           <Route path="/product" component={Product} />   
     </Router>


     exact表示严格匹配

相关文章

  • react 路由、移动端适配以及less配置

    一. 路由设置 首先 react 配置路由需要引入 react-router-dom 依赖: 引入依赖之后,配置路...

  • React 中好用的库

    React-router: 路由库 react-router-config: 统一管理配置我们的路由

  • react16 路由配置

    react16 路由配置 环境:"react": "^16.13.1","react-dom": "^16.13....

  • react路由

    最近在学习react,研究了react的路由配置。说到react路由我们首先看一下react-router和rea...

  • react-router4@笔记

    新项目使用react-router@4来进行路由跳转,使用非static的配置方式该用jsx。之前配置动态生成路由...

  • react路由配置

    一. 安装react-router-dom 使用命令行 npm i react-router-dom --save...

  • react 路由配置

    用了react 也有段时间了,今天来给大家分享下 import { HashRouter, Route, Swit...

  • React路由配置

    React路由简单配置 Router的history是必需的props Router中只能有一个子元素 Switc...

  • React路由配置

    目前前端项目都是SPA项目,而单页应用就少不了路由配置,因为单页应用的页面不会刷新页面,而是根据路由的切换来更换页...

  • react路由配置

    1. 安装 npm i react-router-dom --save 2.在index.js文件中进行配置 3....

网友评论

      本文标题:react路由的配置

      本文链接:https://www.haomeiwen.com/subject/qmbedctx.html