React路由配置
React路由简单配置
//入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Router, Route, BrowserRouter,Switch } from 'react-router-dom'; import createBrowserHistory from "history/createBrowserHistory"; import routeTest from './pages/routeTest'; import Home from './Home'; const history = createBrowserHistory(); ReactDom.render( <Router history={history}> <Switch> <Route path='/' exact component={Home} /> <Route path='/hooksDemo' exact component={routeTest} /> </Switch> </Router >, document.getElementById('app') );
- Router的
history
是必需的props
- Router中只能有一个子元素
- Switch:只渲染第一个与当前地址匹配的
<Route>
- Route的
props path
为路径,component
为路径对应的页面,exact
精确匹配
这是一个简单的路由配置,可以实现页面的简单跳转,但是如果页面比较多,可以把页面组件引入和Route
组件提取出来,以保证入口页面良好的可阅读性。
多页面路由配置
//将页面引入和Route组件提取到./App.js import React from 'react'; import { Router, Route, Switch } from 'react-router-dom'; import PropTypes from 'prop-types'; import routeTest from './pages/routeTest'; import Home from './Home'; const App = ({ history }) => ( <Router history={history}> <Switch> <Route exact path='/' exact component={Home} /> <Route exact path='/hooksDemo' exact component={routeTest} /> </Switch> </Router> ); App.propTypes = { history: PropTypes.shape({}).isRequired }; export default App;
// ./index.js import React from 'react'; import ReactDom from 'react-dom'; import { Router, Route, BrowserRouter,Switch } from 'react-router-dom'; import createBrowserHistory from "history/createBrowserHistory"; import App from './App'; const history = createBrowserHistory(); ReactDom.render( <App history={history} />, document.getElementById('app'), );
- 这样一来,当项目比较大,页面很多的时候,页面引入和
Route
定义的部分都被拆分到./App.js
中,./index.js
只需引入./App.js
即可。
使用react-redux的路由配置
使用react-redux时,需要store
进行状态管理,使用Provider
组件注入store
。
./store,js
创建storeTree
。
./store.js import { createStore, combineReducers, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import routeTestReducer from 'pages/routeTest/indexRedux'; const storeTree = combineReducers({ routeTestReducer }); const store = createStore(storeTree, applyMiddleware(thunk)); export default store;
./index.js
使用Provider
组件传递store
。
./index.js import React from 'react'; import ReactDom from 'react-dom'; import { Router, Route, BrowserRouter,Switch } from 'react-router-dom'; import createBrowserHistory from "history/createBrowserHistory"; import { Provider } from 'react-redux'; import store from './store'; import App from './App'; const history = createBrowserHistory(); ReactDom.render( <Provider store={store}> <App history={history} /> </Provider>, document.getElementById('app'), );
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!