React-Router link方式跳转

观看本文要求了解React-Route的基本操作 和两种路由方式
如果不了解 可以先观看我的文章
初识react-router 做一个简单的路由切换
React-Router之BrowserRouter 与 HashRouter切分方式和基本概念
然后我们通过react路由和HashRouter方式 构建一个这样的组件

import './App.css';
import React from "react";
import Index from "./components/index";
import Alinput from "./components/alinput";
import { HashRouter as Router,Routes,Route } from "react-router-dom";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
 
  render(){
    const IndexRmin = ()=><div><Index/></div>
    const AlinputRmin = ()=><div><Alinput/></div>
    return (
      <div className="App">
        <Router>
            <Routes><Route path='/' element = { IndexRmin() }></Route></Routes>
            <Routes><Route path='/alinput' element = { AlinputRmin() }></Route></Routes>
        </Router>
      </div>
    )
  }
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

其中两个路由控制了两个组件 分别是Index首页组件
Index组件参考代码如下

import React from "react";

class compindex extends React.Component{
  render(){
    return (
      <div>
        首页
      </div>
    )
  }
}

export default compindex;
1
2
3
4
5
6
7
8
9
10
11
12
13

alinput详情组件 参考代码如下

import React from "react";

class alinput extends React.Component{
  render(){
    return (
      <div>
        详情
      </div>
    )
  }
}

export default alinput;
1
2
3
4
5
6
7
8
9
10
11
12
13

这里 我们可以通过输入页面路径来控制路由 但程序肯定不是让我们这样用的

我们就来用一下第一种跳转路由的方式 link
做一个简单的导航页签
我们先多引入一个react-router-dom中的Link组件

import { HashRouter as Router,Routes,Route, Link } from "react-router-dom";
1

然后修改Router标签中的代码如下

<Router>
	<ul>
		<li>
		   <Link to="/">首页</Link>
		</li>
		<li>
		   <Link to="/alinput">详情</Link>
		</li>
	</ul>
	<Routes><Route path='/' element = { IndexRmin() }></Route></Routes>
	<Routes><Route path='/alinput' element = { AlinputRmin() }></Route></Routes>
</Router>
1
2
3
4
5
6
7
8
9
10
11
12

这里需要将Link 和路由管理的组件放在同一个Router 不然就会有问题的
然后我们回到界面


此时 我们就可以通过点击进行界面的跳转了

还有一个冷知识
a标签也能实现这个效果
我们这样写代码

<Router>
	<ul>
		<li>
		    <a href="#/">首页</a>
		</li>
		<li>
		    <a href="#/alinput">详情</a>
		</li>
	</ul>
	<Routes><Route path='/' element = { IndexRmin() }></Route></Routes>
	<Routes><Route path='/alinput' element = { AlinputRmin() }></Route></Routes>
</Router>
1
2
3
4
5
6
7
8
9
10
11
12

我们在界面上点击

发现效果既然是一样的

不过肯定还是推荐link 因为官方肯定是对link做过很多处理的