ルーティングの1つの簡単な使用
-
1.依存関係パッケージをインストールする必要があります
npm install react-router-dom
-
2.2つのコンポーネントを作成するだけです
-
3.
src/index.tsx
ファイル内のルーティングの使用を構成しますimport React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom' import { ConfigProvider } from 'antd' import zh_CN from 'antd/lib/locale-provider/zh_CN'; import store from './store'; import Counter from '@/components/Counter'; import Home from '@/components/Home'; // 全局样式 import './assets/style/common.less'; ReactDOM.render( <Provider store={ store}> <ConfigProvider locale={ zh_CN}> <Router> { /* 注意使用路由的时候都要包一层 */} <React.Fragment> <ul> <li> <Link to="/">首页</Link> </li> <li> <Link to="/counter">计数页面</Link> </li> </ul> <Switch> <Route path='/' exact component={ Home} /> <Route path='/counter' component={ Counter} /> </Switch> </React.Fragment> </Router> </ConfigProvider> </Provider>, document.getElementById('root') )
-
4.ルーティングの通常の使用
-
5.ルーティングを使用した後、コンポーネントに
this.props
さらにいくつかのフィールドが出力されますhistory // 提供一些操作路由的方法 location // 当前路由的信息 match // 匹配的路由信息
-
6.従来の方法で、コンポーネントのページにジャンプする場合
import React, { PropsWithChildren } from 'react'; import { connect } from 'react-redux'; import { Button } from 'antd'; import action from '@/store/actions/counter'; import { CombinedState } from '@/typings'; // 新增的代码 import { RouteComponentProps } from 'react-router-dom'; import { StaticContext } from 'react-router'; interface Params { name: string } interface LocationState { } // 新增路由的参数约束 type Props = PropsWithChildren<RouteComponentProps<Params, StaticContext, LocationState> & ReturnType<typeof mapStateToProps> & typeof action>; // 随便定义一个,可以不写 type State = { [propsName: string]: any } class Counter extends React.Component<Props, State> { render() { console.log(this.props); return ( <> ... <Button type="primary" onClick={ () => this.props.history.push({ pathname: "/", state: { name: '哈哈' } })}>到首页</Button> ... </> ) } } const mapStateToProps = (state: CombinedState) => (state.counter) export default connect( mapStateToProps, action, )(Counter)
-
7.コンポーネントの内部に
state
渡されHome
ます(通常、リストページと詳細ページで送信されるデータ)location
state
次に、ルーティングredux
ミドルウェアを使用してルーティングとredux
構成を行います
-
1.依存関係をインストールします
npm install connected-react-router
-
2.プロジェクト
src
ディレクトリにhistory.ts
ファイルを作成しますimport { createBrowserHistory } from 'history'; export default createBrowserHistory();
-
3.
typings/state.ts
ファイルにルーティングのタイプを追加しますimport { CounterState } from '.'; import { RouterState } from 'connected-react-router'; // 各个组件的reducer的状态类型(每次新增reducer的就要在这里添加) export interface CombinedState { counter: CounterState, router: RouterState, }
-
4、
/src/store/reducers/index.ts
使用connectRouter
する接続history
redux
import { ReducersMapObject, Reducer, combineReducers, AnyAction, Dispatch } from 'redux'; // 新增连接 import { connectRouter } from 'connected-react-router'; import history from '@/history'; import counter from './counter'; import { CombinedState } from '@/typings'; const reducers: ReducersMapObject<CombinedState, AnyAction> = { // 各个组件的reducer counter, // 新增路由连接 router: connectRouter(history) }; const rootReducers: Reducer<CombinedState, any> = combineReducers(reducers); export type StoreDispatch = Dispatch; export type StoreGetState = () => CombinedState; export default rootReducers;
-
5.
src/store/index.ts
接続されたミドルウェアをで構成しますimport { createStore, applyMiddleware } from 'redux'; import logger from 'redux-logger'; import promise from 'redux-promise'; import thunk from 'redux-thunk'; import { composeWithDevTools } from 'redux-devtools-extension' import { routerMiddleware } from 'connected-react-router'; import history from '@/history'; import rootReducer from './reducers'; const enhancers = process.env.NODE_ENV === "development" ? composeWithDevTools( applyMiddleware(routerMiddleware(history), promise, thunk, logger) ) : applyMiddleware(routerMiddleware(history), promise, thunk); const store = createStore(rootReducer, enhancers); export default store;
-
6.でファイルを
src/index.tsx
使用history.ts
する... import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom' import { ConfigProvider } from 'antd' import zh_CN from 'antd/lib/locale-provider/zh_CN'; import store from './store'; import Counter from '@/components/Counter'; import Home from '@/components/Home'; import { ConnectedRouter } from 'connected-react-router'; import history from './history'; // 全局样式 import './assets/style/common.less'; ReactDOM.render( <Provider store={ store}> <ConnectedRouter history={ history}> <ConfigProvider locale={ zh_CN}> { /*注意这个地方,如果使用了connected-react-router就不需要使用Router*/} <ul> <li> <Link to="/">首页</Link> </li> <li> <Link to="/counter">计数页面</Link> </li> </ul> <Switch> <Route path='/' exact component={ Home} /> <Route path='/counter' component={ Counter} /> <Redirect to="/" /> </Switch> </ConfigProvider> </ConnectedRouter> </Provider>, document.getElementById('root') )
3、redux
ルートの操作を使用します
-
1.
/src/store/actions/counter.ts
でルートジャンプメソッドを作成しますimport * as types from './../action-types'; import { CounterPayload } from '@/typings'; import { activityList } from '@/api'; import { StoreDispatch, StoreGetState } from '../reducers'; import { CallHistoryMethodAction, push } from 'connected-react-router'; import { LocationDescriptorObject } from 'history'; export default { ... // 返回首页 goHome(path: LocationDescriptorObject<any>): CallHistoryMethodAction { console.log('path', path); return push(path) } }
-
2.コンポーネントでの使用
import React, { PropsWithChildren } from 'react'; import { connect } from 'react-redux'; import { Button } from 'antd'; import action from '@/store/actions/counter'; import { CombinedState } from '@/typings'; import { RouteComponentProps } from 'react-router-dom'; import { StaticContext } from 'react-router'; interface Params { name: string } interface LocationState { } type Props = PropsWithChildren<RouteComponentProps<Params, StaticContext, LocationState> & ReturnType<typeof mapStateToProps> & typeof action>; // 随便定义一个,可以不写 type State = { [propsName: string]: any } class Counter extends React.Component<Props, State> { render() { console.log(this.props); return ( <> { /*直接使用this.props.goHome到actions中*/} <Button type="primary" onClick={ () => this.props.goHome({ pathname: "/", state: { name: '哈哈' } })}>到首页</Button> </> ) } } const mapStateToProps = (state: CombinedState) => (state.counter) export default connect( mapStateToProps, action, )(Counter)