react 路由

1.安装React路由

  npm i react-router-dom --save

2. 在index.js中引入 import {HashRouter as router} from 'react-router-dom

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {HashRouter as Router} from 'react-router-dom'
ReactDOM.render(
         <Router>
          <App />
         </Router>
         , document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

3.然后再新建一个router.js文件，开始写路由和路由切换

import React, { Component } from 'react'
import {Route,NavLink} from 'react-router-dom'
import Text2 from './text2' //这是我引入过来的子组件
import Text3 from './text3'
import './text.css'

export default class Text1 extends Component {
    render() {
        return (
            <div>
                <NavLink to="/text2">逆战班text2</NavLink> //默认选中有一个类默认的名字叫active，可以添加样式
                <NavLink to="/text3">逆战班text3</NavLink>
               <Route path="/text2" component={Text2}></Route>
               <Route path="/text3" component={Text3}></Route>
            </div>
        )
    }
}

4.这是我新建的Text2和Text3两个子组件

import React, { Component } from 'react'

export default class Text2 extends Component {
    render() {
        return (
            <div>
                我是子组件Text2
            </div>
        )
    }
}

import React, { Component } from 'react'

export default class Text3 extends Component {
    render() {
        return (
            <div>
                我是子组件Text3
            </div>
        )
    }
}