react项目引入路由组件react-router-dom

步骤一： 安装react-router-dom，进入创建好的react项目，执行以下命定即可安装好路由组件

npm install react-router-dom

步骤二： 创建文件router.js用作react的路由，该文件主要为指定react的路由规则，匹配路径与相对应的页面组件，其中Home组件为页面的导航栏组件，用户改变当前的路径以跳转到相应的页面,即当路径为/cart，页面就会跳转到cart组件，当路径为/user，页面就会跳转到user组件

router.js

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../component/home/home';
import user from '../component/user/user';
import cart from '../component/cart/cart';
const Router = () => (
    <HashRouter>
        <Home></Home>
        <Switch>
            <Route exact path="/cart" component={cart}/>
            <Route  path="/user" component={user}/>
        </Switch>
    </HashRouter>
);
export default Router;

home.js

import React from 'react';
import {NavLink} from 'react-router-dom'
import './home.css'
class List extends React.Component {
    constructor(props){
        super(props)
    }
    render(){
        return <div className="menuContainer"><NavLink activeClassName="activeMenu" to={this.props.path}>{this.props.name}</NavLink></div>
    }
}


const  home = class Home extends React.Component {
    render() {
        return (
            <div>
                <List name="购物车" path="/cart"></List>
                <List name="用户中心" path="/user"></List>
            </div>
        )
    }
}
export default home

然后再创建对应的业务页面user.js和cart.js
user.js

import React from "react";

const  user = class User extends React.Component {
    render() {
        return (
            <div>
                用户中心
            </div>
        )
    }
}
export default user

cart.js

import React from "react";

const  cart = class Cart extends React.Component {
    render() {
        return (
            <div>
                购物车
            </div>
        )
    }
}
export default cart

到此为止，demo所需的所有文件都创建完成了，接下来就是将我们创建的页面路由挂载到我们的项目中

步骤三： 将我们的路由挂载到当前的项目，打开index.js文件（脚手架创建项目时会自动创建好），可以看见ReactDOM.render(, document.getElementById(‘root’)); 当前页面挂载的为默认的App页面，我们只需要将App改为我们的路由组件(Router)即可，这样就完成的路由组件的引入（当然路由组件不一定要这样写，还有很多的其他用法可以参考官方的文件，这里只是介绍一种简单的用法）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Router from './router/router';
import * as serviceWorker from './serviceWorker';

//原有的页面
//ReactDOM.render(<App />, document.getElementById('root'));

//我们的路由组件
ReactDOM.render(<Router />, document.getElementById('root'));
serviceWorker.unregister();

最后即可启动我们的项目，然后在浏览器上查看效果