以编程方式路由与 redux 反应

Posted 2023-02-22

【中文标题】以编程方式路由与 redux 反应

【英文标题】：Routing programmatically in react with redux

【发布时间】：2018-12-28 16:49:42

【问题描述】：

当我想从页面上的静态链接进行路由时，index.js 中的以下代码 sn-p 对我来说效果很好-

import React from 'react';
import ReactDOM from 'react-dom';
import LoginForm from './components/LoginForm/LoginForm';
import  Provider  from 'react-redux';
import store from './redux/store';
import  BrowserRouter as Router, Switch, Route, Link  from 'react-router-dom';
import Home from './components/Home.js'

ReactDOM.render(
  <Provider store=store>
    <Router>
      <div>
        <h2>My Page</h2>
        <ul>
          <li><Link to='/'>LoginForm</Link></li>
          <li><Link to='/home'>Home</Link></li>
        </ul>
        <hr />

        <Switch>
          <Route exact path='/' component=LoginForm />
          <Route exact path='/home' component=Home />
        </Switch>
      </div>
    </Router>
  </Provider>,
  document.getElementById('root')

是否可以在代码中路由到另一个页面，例如？

 updateStore(loggedIn)
    const action = type:loggedIn;
    store.dispatch(action);
    if(loggedIn==='LOGGED_IN')
       console.log("I am In");
      //route me into another page ??
    else
      console.log("I am out");
    
  

【问题讨论】：

Linking programmatically 是什么意思？

类似于 LoginForm 中的链接。我想在登录成功后在我的回调方法中路由。

您想在登录后重定向到/？

我想在登录后重定向到 /home

【参考方案1】：

得到我的答案here

创建了我自己的 route.js

import React from 'react';
import  Route, Switch  from 'react-router';
import LoginForm from './components/LoginForm/LoginForm';
import Home from './components/Home';

class RouteList extends React.Component 
    render() 
        return (
            <Switch>
                <Route exact path="/" component=LoginForm />
                <Route path='/home' exact=true component=Home></Route>
            </Switch>

        );
    


export default RouteList;

然后在 index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import store from './redux/store';
import RouteList from './route';
import  Router  from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'
export const history = createBrowserHistory()

ReactDOM.render(
  <Provider store=store>
    <Router history=history>
      <RouteList></RouteList>
    </Router>
  </Provider>,
  document.getElementById('root')
);

最后在我的 action.js 中 -

import  history  from '../index';

callLoginApi(email, password, error => 
  dispatch(setLoginPending(false));
  if (!error) 
    dispatch(setLoginSuccess(true));
    history.push('/home');
   else 
    dispatch(setLoginError(error));
  
);

【参考方案2】：

您可以为此使用react-router

npm i react-router --save

在您的组件中执行以下操作

import browserHistory from 'react-router';

 callback = () => 
   browserHistory.push('/home');
 

【讨论】：

这不起作用:( ..我在 index.js 中使用“import BrowserRouter as Router, Switch, Route, Link from 'react-router-dom';”。可能是反应-router-dom 与 react-router 不同

看看这个关于你的问题的答案***.com/questions/42684809/…