以编程方式路由与 redux 反应答案

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"); } }

【解决方案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 不同
看看这个关于你的问题的答案stackoverflow.com/questions/42684809/…