发布于 

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 Ｌink组件：须在Ｒouter组件内部

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧

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