react-router-dom 的基本使用

1.明确好界面中的导航区、展示区

2.导航区的a标签改为Link标签

         <Link to="/xxxxx">Demo</Link>

3.展示区写Route标签进行路径的匹配

          <Route path='/xxxx' component={Demo}/>

4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

 

例如：

index.js

 

//引入react核心库

import React from 'react'

//引入ReactDOM

import ReactDOM from 'react-dom'

//

import {BrowserRouter} from 'react-router-dom'

//引入App

import App from './App'

ReactDOM.render(

    <BrowserRouter>

        <App/>

    </BrowserRouter>,

    document.getElementById('root')

)

 

 

app.jsx

 

import React, { Component } from 'react'

import {Link,Route} from 'react-router-dom'

import Home from './components/Home'

import About from './components/About'

export default class App extends Component {

    render() {

        return (

            <div>

                <div className="row">

                    <div className="col-xs-offset-2 col-xs-8">

                        <div className="page-header"><h2>React Router Demo</h2></div>

                    </div>

                </div>

                <div className="row">

                    <div className="col-xs-2 col-xs-offset-2">

                        <div className="list-group">

                            {/* 原生html中，靠<a>跳转不同的页面 */}

                            {/* <a className="list-group-item" href="./about.html">About</a>

                            <a className="list-group-item active" href="./home.html">Home</a> */}

                            {/* 在React中靠路由链接实现切换组件--编写路由链接 */}

                            <Link className="list-group-item" to="/about">About</Link>

                            <Link className="list-group-item" to="/home">Home</Link>

                        </div>

                    </div>

                    <div className="col-xs-6">

                        <div className="panel">

                            <div className="panel-body">

                                {/* 注册路由 */}

                                <Route path="/about" component={About}/>

                                <Route path="/home" component={Home}/>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        )

    }

}