react-router-dome的使用一

https://reactrouter.com/web/example/url-params

方便页面切换视图和组件

1:第一步安装 react-router-dom 不要使用 react-router

npm install react-router-dom --save

2:第二步引入

import {HashRouter as Router,Route,Switch,Redirect} from  "react-router-dom"

HashRouter   #   4以上已经不支持 hashHistory
 推荐使用BrowserRouter   /  HistoryRouter  #

最外围的使用Router包裹

每一个路由的设置使用Route 里面有 path component 用来指定 地址和 显示的组件

Link表示跳转

3:第三步使用

分别创建三个视图页面

分别写入

import React, { Component } from 'react'

export default class Center extends Component {
    render() {
        return (
            <div>
                我是中心页面
            </div>
        )
    }
}

import React, { Component } from 'react'

export default class Home extends Component {
    render() {
        console.log(this.props);
        return (
            <div>
                我是首页
            </div>
        )
    }
}

import React from 'react'

export default function Mine() {
    return (
        <div>
            我是个人页面
        </div>
    )
}

 

4 回到index.js页面配置路由加载视图

import {HashRouter as Router,Route,Switch,Redirect} from  "react-router-dom"
import Home from  "./views/Home"
import Center from "./views/Center"


引入路由模式  route配置   路由控制  路由重定向

5 配置路由和访问路由时对应的页面

ReactDom.render(
    <Router>
        <Switch>        
        <Route path="/center" component={Center} exact></Route>
        <Route path="/Mine" component={Mine} ></Route>
        <Route path="/" component={Home} >       
        </Route>
        </Switch>
    </Router>
    ,document.getElementById("root"));

在页面访问的时候 就看到不同的路由加载不同的视图

 

最后可以尝试吧HashRouter 改成BrowserRouter试一试