React 路由配置 Router

**

React 路由配置 Router

**

1. 首先引入路由包
npm install --save react-router-dom 或者
npm install --save react-router

二者区别为：

1.react-router：是基本的router包，里边函的内容较多，但是在网页开发中有很多用不到，现在的市面上的课程讲的基本都是这个包的教程。

2.react-router-dom：随着react生态环境的壮大，后出现的包，这个包比react-router包轻巧了很多。`

注意：其实安装了react-router包就不用安装了react-router-dom包了，这里只是为了给大家一个提示，所以两个包 我都写出来了。在实际开发中，请根据需要进行安装。安装时使用–save，因为这是要在生产环境中使用的。

在这里我安装的是轻量版本

安装完成之后是这样

到此安装 router 就完成了 剩下的就是配置路由文件了

三，路由文件配置
src下新建Router文件

import Home from '../pages/home/index.jsx'; // src下新建自己的文件引入配置路由
import Baby from '../pages/baby/index.jsx';
import React from 'react';
import {Router,Route,Switch,Redirect} from 'react-router-dom';
import { createBrowserHistory } from "history";  // createBrowserHistory 此方法是吧URL路径中警号去掉
//createBrowserHistory 此方法留着url路径中的#号
// const history = createHashHistory();
const browserHistory = createBrowserHistory()


class RouterConfig extends React.Component{
    render(){
        return(
            <Router history={browserHistory}>
                <Switch>
                    <Route path='/' exact render={()=>(
                        <Redirect to='/Home'/>
                    )}/>
                    <Route path='/Home' component={Home}/>
                    <Route path='/Baby' component={Baby}/>
                </Switch>
            </Router>
        )
    }
}

export default RouterConfig;```

```javascript

四，在入口文件引入引入路由配置文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';  // 此处我把默认注释  引入自己配制的路由文件  RouterConfig 
import reportWebVitals from './reportWebVitals';
import RouterConfig from './Router/index'


ReactDOM.render(<RouterConfig/>, document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

五.在各组件中使用路由

import React from 'react'
import './index.less'

const home = (props) => {
    const tiaozhuan=()=>{
        console.log('999999');
        window.location.href="Baby"  // 我习惯用此种方法跳转啊哈哈哈哈哈哈
    }
	return (
		// <React.Fragment>
		// 	<div
		// 		className="m_b_ft_menus"
		// 		onClick={props.onAddMenusClick.bind(null, true)}
		// 	></div>
		// </React.Fragment>
        <div>
            home文件
            <div>
                <button onClick={()=>tiaozhuan()}>
                    我要跳转到baby页面
                </button>
            </div>
        </div>
	)
}
export default React.memo(home)

作者：王家卫
链接：https://www.jianshu.com/p/a0427a55ae47
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。