How to install react routing

Installation method of react routing: 1. Install routing through "npm i react-router-dom@5.0 -S"; 2. Use "import { HashRouter as Router, Route, NavLink } from 'react-router -dom'" method to import routes.

#The operating environment of this tutorial: Windows 10 system, react-router-dom version 5.0, Dell G3 computer.

How to install react routing?

react routing installation and simple use

1.react installation routing

Installation: npm i react-router-dom@5.0 - S (The latest version is 6.0)

Import:

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

Routing configuration:

1. All routing related content should be placed in the component

2. Link usage:

3. Page usage:

Example: Simple route jump

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. Route parameter transfer

Route parameter transfer form

1. Link parameter transfer

2. Parameter passing

3. Parameter acquisition props.match.params.id

Commonly used historical operation methods

1.go()History jump record

2.goBack(return)

3.push()Add record jump

4.replace() replaces the record and jumps

Example:

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 id="产品-match-params-id">产品{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>
}

Sub-route parameter passing

Example:

// 导入路由相关组件
// 导入哈希路由 别名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 id="">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 id="产品-match-params-id">产品{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>
}

Recommended learning ：《react video tutorial》

The above is the detailed content of How to install react routing. For more information, please follow other related articles on the PHP Chinese website!