安装路由: yarn add react-router-dom || cnpm i react-router-dom
最新的路由版本是5.1.2的版本
- React-Router的分类:
- react-router
- 涉及到react的一些核心的东西
- react-router-dom
- 做Web端开发的(Webapp)
- react-router-native
- 做原生开发(原生应用)
- react-router-config
- 做静态路由的一些相关的配置
- react-router
在index.js引入import {BrowserRouter as Router} from "react-router-dom"
import {
BrowserRouter as Router} from "react-router-dom"
ReactDOM.render(
<Router> //使用Router实现路由
<App />
</Router>,
document.getElementById('root')
);
配置路由
在App.js中引入import {Route} from "react-router-dom"
和路由视口import Home from "./views/Home"
import Article from "./views/Article"
import React, {
Component } from 'react'
import {
Route} from "react-router-dom"
import Home from "./views/Home"
import Article from "./views/Article"
export default class App extends Component {
render() {
return (
<div>
<Route path="/home" component={
Home} />{
/*配置路由*/}
<Route path="/article" component={
Article} />
</div>
)
}
}
在浏览器输入home和article就可以访问根据路由路劲访问不同的路由组件了
路由的重定向
在App.js从react-router-dom解构出Redirect,import {Route,Redirect} from "react-router-dom"
import React, {
Component } from 'react'
import {
Route} from "react-router-dom"
import Home from "./views/Home"
import Article from "./views/Article"
export default class App extends Component {
render() {
return (
<div>
<Route path="/home" component={
Home} />
<Route path="/article" component={
Article} /