发布于 

React路由的基本使用

前段路由是一套映射规则,在React中,是URL路径与组件的对应关系。就是配置路径和组件(一一对应)

1.React路由安装:

1
$ npm i react-router-dom

2.导入路由的三个核心组件:Router / Route / Link

1
import { BrowserRouter as Router , Route, LInk } from 'react-router-dom'

3.使用Router组件包裹整个应用(重要!!!)

1
2
3
4
5
6
7
8
<Router>
<nav className="menu">
// ...
</nav>
<div className="app">
// ...路由配置
</div>
</Router>

4.使用Link组件作为导航菜单(路由入口)

1
<Link> ... </Link>

5.使用Router组件配置路由规则和要展示的组件(路由出口)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Home extends Component{
render () {
return (
.....
)
}
}
.....b
<Router>
<nav className="menu">
<Link to="/home">home</Link>
</nav>
<div className="app">
<Route path="/home" component={Home} />
</div>
</Router>

注:Router组件:包裹整个应用,一个React应用只需使用一次

​ Router Link组件:须在Router组件内部


本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。