Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Cara memasang penghalaan tindak balas
Cara memasang penghalaan tindak balas: 1. Pasang penghalaan melalui "npm i react-router-dom@5.0 -S" 2. Gunakan "import { HashRouter sebagai Router, Route, NavLink } daripada 'react-router -dom'" kaedah untuk mengimport laluan.
Persekitaran pengendalian tutorial ini: sistem Windows 10, react-router-dom versi 5.0, komputer Dell G3.
Bagaimana untuk memasang penghalaan tindak balas?
Pemasangan penghalaan tindak balas dan penggunaan mudah
1. S (Versi terkini ialah 6.0)
Import:
Konfigurasi penghalaan:import { HashRouter as Router, Route, NavLink } from 'react-router-dom'
1 Semua kandungan berkaitan penghalaan harus diletakkan dalam komponen 4500ff5f240b3cdd8717cb1c6f88dbbc
2. Penggunaan pautan: 5f1e9f2f00cda64b74574e642a04e08d
3. Penggunaan halaman: ef9940d56bb0fb6988ff2d284095b7dd
Contoh: Lompat laluan mudah
2 Pemindahan parameter laluanfunction App() { return (<Router> <div> //exact 精确匹配 <NavLink to='/' exact>首页</NavLink>| <NavLink to='/about' >关于</NavLink> </div> {/* 路由页面 */} <Switch> <Route path="/" exact component={Home}></Route> <Route path="/about" component={About}></Route> </Switch> </Router>) } export default App function Home() { return <div>首页页面</div> } function About() { return <div> 关于页面 </div> }
Borang pemindahan parameter laluan
1. produce/abc">
2. Parameter passing ad14d8ca4868d89fdf601e3800bad992
3. Parameter acquisition props.match.params.id
Kaedah operasi sejarah biasa
1.go() rekod lompat sejarah
2.goBack (pulangan)
3.push() tambah rekod Lompat
4.replace() menggantikan rekod dan melompat
Contoh:
Lulus parameter sub-laluanimport { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom' // NavLink 会比 link自动添加一个active的class function App() { return (<Router> <div> <NavLink to='/' exact>首页</NavLink>| <NavLink to='/about' >关于</NavLink> <NavLink to='/produce/abc'>产品abc</NavLink> <NavLink to='/produce/123'>产品123</NavLink> </div> {/* 路由页面 */} <Switch> <Route path="/" exact component={Home}></Route> <Route path="/about" component={About}></Route> <Route path="/produce/:id" component={Produce}></Route> </Switch> </Router>) } export default App function Produce({ match, history, location }) { // console.log(match); return (<div> <h1>产品{match.params.id}</h1> <button onClick={() => history.goBack()}>返回</button> <button onClick={() => history.push('/')}>回到首页</button> </div>) } function Home() { return <div>首页页面</div> } function About() { return <div>关于页面 </div> }
Contoh:
Pembelajaran yang disyorkan: "// 导入路由相关组件 // 导入哈希路由 别名router // Route路由页面 // NvaLink 导航链接 import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom' // NavLink 会比 link自动添加一个active的class function App() { return (<Router> <div> <NavLink to='/' exact>首页</NavLink>| <NavLink to='/about' >关于</NavLink> <NavLink to='/produce/abc'>产品abc</NavLink> <NavLink to='/produce/123'>产品123</NavLink> <NavLink to='/admin'>管理</NavLink> </div> {/* 路由页面 */} <Switch> <Route path="/" exact component={Home}></Route> <Route path="/about" component={About}></Route> <Route path="/produce/:id" component={Produce}></Route> <Route path="/admin" component={Admin}></Route> </Switch> </Router>) } export default App function NoMatch({ location, history }) { return (<div> <h1>404</h1> <p>你爹来咯</p> <p>{location.url}</p> <button onClick={history.goBack}>后退</button> <NavLink to={{ pathname: "/" }}>首页</NavLink> </div>) } function Admin() { return (<div style={{ "display": "flex" }}> <div style={{ width: "200px", boderRight: "1px solid #f0f0f0" }}> <NavLink to="/admin/dash">概览</NavLink><br /> <NavLink to="/admin/orderlist">列表</NavLink> </div> <div> <Route path="/admin/dash" component={Dash}></Route> <Route path="/admin/orderlist" component={OrderList}></Route> <Redirect path='/admin' to="/admin/dash"></Redirect> </div> </div>) } function Dash() { return (<div> 概览 </div>) } function OrderList() { return (<div> 订单列表 </div>) } function Produce({ match, history, location }) { // console.log(match); return (<div> <h1>产品{match.params.id}</h1> <button onClick={() => history.goBack()}>返回</button> <button onClick={() => history.push('/')}>回到首页</button> </div>) } function Home() { return <div>首页页面</div> } function About() { return <div>关于页面 </div> }tutorial video bertindak balas
Atas ialah kandungan terperinci Cara memasang penghalaan tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!