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

最新推荐文章于 2024-04-13 03:53:17 发布

弹琴弹琴

最新推荐文章于 2024-04-13 03:53:17 发布

阅读量1k

点赞数

分类专栏： React点滴知识文章标签： react

本文链接：https://blog.youkuaiyun.com/bbsyi/article/details/82491611

版权

React点滴知识专栏收录该内容

48 篇文章

订阅专栏

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.youkuaiyun.com/bbsyi/article/details/82426733