react路由

首先使用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相當(dāng)于一個組件 */}
        {/* 在傳遞參數(shù)的時候可以設(shè)置成 :參數(shù)名? 表示可選參數(shù) */}
        {/* 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>關(guān)于我們</h1>} />
          <Route path="/detail/:id" component={()=><h1>詳情頁</h1>} />
          <Route component={() => <h1>頁面沒找到</h1>} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容