美文网首页
react路由

react路由

作者: _仗剑走天涯 | 来源:发表于2019-06-18 17:33 被阅读0次

首先使用npm安装模块

npm i react-router-dom

哪里需要就在哪里引用
ex>

import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';

function App() { 
  return (
    <div className="App">
      <Router>
        {/* exact表示绝对匹配 */}
        {/* 在react-router中每一个Route相当于一个组件 */}
        {/* 在传递参数的时候可以设置成 :参数名? 表示可选参数 */}
        {/* Switch表示只匹配一个符合条件的路由 */}
        <Switch>
          <Route path="/" exact component={()=><h1>首页</h1>} />
          <Route path="/hot/:tag" component={()=><h1>热卖</h1>} />
          <Route path="/hot_show" component={()=><h1>热映 </h1>} />
          <Route path="/about" component={()=><h1>关于我们</h1>} />
          <Route path="/detail/:id" component={()=><h1>详情页</h1>} />
          <Route component={() => <h1>页面没找到</h1>} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

相关文章

  • react从0到1的探索记录04

    18、React中的路由 React中路由的基本使用 在react中使用路由首先需要安装react的路由模块 np...

  • react学习资料八

    路由 使用react的路由就要引入react路由插件react-router.js ReactRouter 保存一...

  • React-Router知识点

    路由的分类 页面路由 hash 路由 h5路由 react路由 react-router-dom 路由方式 h5路...

  • React路由

    React 路由 一、在React中使用react-router-dom路由 安装npm install reac...

  • 有标题的文章

    React Redux 路由设计 - - React

  • React路由

    React路由 一、路由的形式 hash路由 : HashRouter history路由 : BrowserRo...

  • react-router Q & A

    什么是React 路由? React 路由是一个构建在 React 之上的强大的路由库,它可以让你向应用中快速地添...

  • 2018-12-21路由

    1.路由 React路由依赖于React Router,React Router保持UI和与URL的同步。它拥有简...

  • react-router-dom 的基本使用

    本文介绍 react 中路由的使用。在 react 中使用 路由的库为 react-router。或者是 reac...

  • react-router

    React Router 是完整的 React 路由解决方案 import React from 'react' ...

网友评论

      本文标题:react路由

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