반응 라우팅을 설치하는 방법

반응 라우팅 설치 방법: 1. "npm i React-router-dom@5.0 -S"를 통해 라우팅을 설치합니다. 2. "react-router-dom'에서 { HashRouter as Router, Route, NavLink } 가져오기"를 사용합니다. 경로를 가져오면 됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, React-router-dom 버전 5.0, Dell G3 컴퓨터.

반응 라우팅을 설치하는 방법은 무엇입니까?

react 라우팅 설치 및 간단한 사용

1. React 설치 라우팅

설치: npm i React-router-dom@5.0 -S (최신 버전은 6.0)

가져오기:

import { HashRouter as Router, Route, NavLink } from 'react-router-dom'

Route 구성:

1. 모든 라우팅 관련 콘텐츠는 구성 요소 내에 배치되어야 합니다.

2. 링크 사용:

3. component ={Component}>

예: 단순 경로 점프

function App() {
    return (<Router>
        <div>
              //exact 精确匹配
            <NavLink to=&#39;/&#39; exact>首页</NavLink>|
            <NavLink to=&#39;/about&#39; >关于</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>
}

2. 경로 매개변수 전송

경로 매개변수 전송 양식

1. 링크 매개변수 전송

2. 매개변수 전달

3. 매개변수 획득 props.match.params.id

일반적으로 사용되는 과거 연산 방법

1.go() 기록 점프 기록

2.goBack(반환)

3.push() 레코드 추가 점프

4.replace() 레코드 교체 및 점프

예:

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=&#39;/&#39; exact>首页</NavLink>|
            <NavLink to=&#39;/about&#39; >关于</NavLink>
            <NavLink to=&#39;/produce/abc&#39;>产品abc</NavLink>
            <NavLink to=&#39;/produce/123&#39;>产品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(&#39;/&#39;)}>回到首页</button>
    </div>)
}
 
function Home() {
    return <div>首页页面</div>
}
 
function About() {
    return <div>关于页面
    </div>
}

하위 경로 매개변수 전달

예:

// 导入路由相关组件
// 导入哈希路由 别名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=&#39;/&#39; exact>首页</NavLink>|
            <NavLink to=&#39;/about&#39; >关于</NavLink>
            <NavLink to=&#39;/produce/abc&#39;>产品abc</NavLink>
            <NavLink to=&#39;/produce/123&#39;>产品123</NavLink>
            <NavLink to=&#39;/admin&#39;>管理</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=&#39;/admin&#39; 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(&#39;/&#39;)}>回到首页</button>
    </div>)
}
 
function Home() {
    return <div>首页页面</div>
}
 
function About() {
    return <div>关于页面
    </div>
}

추천 학습: "

반응 동영상 튜토리얼"

위 내용은 반응 라우팅을 설치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!