美文网首页
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路由

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