首先使用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;
网友评论