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'),
);
复制代码

Demo源码地址:https://github.com/wuhuaranran/react-demo-

posted @   朝曦Z  阅读(5248)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
点击右上角即可分享
微信分享提示