React的路由跳转 - Powered by Discuz! Archiver

首页 › React论坛 › React的路由跳转

神鰰神 發表於 2022-1-13 22:50:00

React的路由跳转

<p>要实现React的路由跳转，需要用react-router-dom组件。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">react-router-dom</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^6.2.1</span><span style="color: rgba(128, 0, 0, 1)">"</span></pre>
</div>
<p>在App.js配置路由</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">import React, { Component } from 'react';
import './App.scss';// 引入样式文件
import { HashRouter, Route, Routes, Navigate } from "react-router-dom";
import Home from './view/Home.jsx';
import Config from './view/Config.jsx';
import Draw from './view/Draw.jsx';

class App extends Component {
constructor(props) {
super(props);
this.state = {};
}

render() {
return (
   </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">HashRouter</span><span style="color: rgba(0, 0, 255, 1)">></span>
   <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">main</span><span style="color: rgba(0, 0, 255, 1)">></span>
         <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">Routes</span><span style="color: rgba(0, 0, 255, 1)">></span>
         <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">Route </span><span style="color: rgba(255, 0, 0, 1)">path</span><span style="color: rgba(0, 0, 255, 1)">="/home"</span><span style="color: rgba(255, 0, 0, 1)"> exact element</span><span style="color: rgba(0, 0, 255, 1)">={<Home </span><span style="color: rgba(0, 0, 255, 1)">/></span><span style="color: rgba(0, 0, 0, 1)">}/>
         </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">Route </span><span style="color: rgba(255, 0, 0, 1)">path</span><span style="color: rgba(0, 0, 255, 1)">="/config"</span><span style="color: rgba(255, 0, 0, 1)"> exact element</span><span style="color: rgba(0, 0, 255, 1)">={<Config </span><span style="color: rgba(0, 0, 255, 1)">/></span><span style="color: rgba(0, 0, 0, 1)">}/>
         </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">Route </span><span style="color: rgba(255, 0, 0, 1)">path</span><span style="color: rgba(0, 0, 255, 1)">="/draw"</span><span style="color: rgba(255, 0, 0, 1)"> exact element</span><span style="color: rgba(0, 0, 255, 1)">={<Draw </span><span style="color: rgba(0, 0, 255, 1)">/></span><span style="color: rgba(0, 0, 0, 1)">}/>
         </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">Route </span><span style="color: rgba(255, 0, 0, 1)">path</span><span style="color: rgba(0, 0, 255, 1)">="*"</span><span style="color: rgba(255, 0, 0, 1)"> element</span><span style="color: rgba(0, 0, 255, 1)">={<Navigate </span><span style="color: rgba(255, 0, 0, 1)">to</span><span style="color: rgba(0, 0, 255, 1)">="/home"</span> <span style="color: rgba(0, 0, 255, 1)">/></span><span style="color: rgba(0, 0, 0, 1)">} />
         </span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">Routes</span><span style="color: rgba(0, 0, 255, 1)">></span>
   <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">main</span><span style="color: rgba(0, 0, 255, 1)">></span>
   <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">HashRouter</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
);
}
}
export default App;</span></pre>
</div>
<p>新建Home.jsx，进行路由跳转</p>
<div class="cnblogs_code">
<pre>import React, { Component } from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import { Button } from </span>'antd'<span style="color: rgba(0, 0, 0, 1)">
import { Link } from </span>"react-router-dom"<span style="color: rgba(0, 0, 0, 1)">;

class Home extends Component {
constructor(props) {
super(props);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {};
}

jumpToConfigPage(){

}

render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
   </span><div>
   <h1>红包幸运抽奖系统</h1>
   <center className="btns">
      <Link to="/config">
         <Button type="primary" shape="round">配置</Button>
      </Link>
      <Link to="/draw">
         <Button type="primary" shape="round">抽奖</Button>
      </Link>
   </center>
   </div>
<span style="color: rgba(0, 0, 0, 1)"> );
}
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Home;</pre>
</div>
<p>新建Draw.jsx</p>
<div class="cnblogs_code">
<pre>import React, { Component } from 'react'<span style="color: rgba(0, 0, 0, 1)">;

class Draw extends Component {
constructor(props) {
super(props);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {};
}

render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
   </span><div>
   <h1>Draw</h1>
   </div>
<span style="color: rgba(0, 0, 0, 1)"> );
}
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Draw;</pre>
</div>
<p>新建Config.jsx</p>
<div class="cnblogs_code">
<pre>import React, { Component } from 'react'<span style="color: rgba(0, 0, 0, 1)">;

class Config extends Component {
constructor(props) {
super(props);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {};
}

render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
   </span><div>
   <h1>Config</h1>
   </div>
<span style="color: rgba(0, 0, 0, 1)"> );
}
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Config;</pre>
</div>
<p>即可。</p><br><br>
来源：https://www.cnblogs.com/luoyihao/p/15800045.html

頁: [1]

查看完整版本: React的路由跳转