react使用总结二:react-router 路由使用

1.router.js定义路由

import React from "react";
import {BrowserRouter as Router,Route,Redirect,Switch} from 'react-router-dom';


// 1.引入组件
import App from './pages/App/app.js';
import Index from './pages/Index/index.js';
import Page1 from './pages/Page1/page1.js';
import Page2 from './pages/Page2/page2.js';
import Page3 from './pages/Page3/page3.js';


// react-redux
import createStore from './store/store.js';
import {Provider} from './react-redux.js';
import themeReducer from './store/reducer';

const store = createStore(themeReducer);




// 2.构建路由
const Routes = (
	<Router>
		{/*react-redux*/}
		<Provider store={store}>
			<App>
				<Switch>
					<Route path="/index" component={Index}></Route>
					<Route path = "/page1" component = {Page1}></Route>
	 				<Route path = "/page2" component = {Page2}></Route>
	 				<Route path = "/page3" component = {Page3}></Route>
					<Redirect from="/" to="/index"/> {/*重定向*/}
				</Switch>
			</App>
		</Provider>
	</Router>
)

export default Routes;

2.index.js ReactDOM中使用路由

// import React from "react";
import ReactDOM from "react-dom";
import router from "./router";

// 1.在ReactDOM中使用router
ReactDOM.render(router,document.getElementById("root"));

参考:https://blog.csdn.net/bbsyi/article/details/82426733

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值