React Router 5.重定向后未呈现组件答案

【问题标题】：React Router 5. Component not rendered after redirectReact Router 5.重定向后未呈现组件
【发布时间】：2020-08-21 09:30:17
【问题描述】：

我正在尝试实现重定向到登录页面，然后在成功登录后重定向到个人资料页面。

当我这样做时

import { Router } from 'react-router-dom';

重定向到登录页面不起作用。但是，如果我使用 BrowserRouter，它会起作用：

import { BrowserRouter as Router } from 'react-router-dom';

根据快速谷歌搜索的信息，浏览器路由器不适用于histry.push，我需要在成功登录后使用。

我做错了什么？

历史：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
export default history;

App.js：

//...
import { Router, Route, Switch } from 'react-router-dom'; // redirects if using BrowserRouter as Router
import history from './helpers/history';
//...

function App() {
  return (
    <div className="App">
      <Router history={history}>
        <Switch>
          <PrivateRoute exact path={process.env.REACT_APP_ROUTE_PREFIX} component={ProfilePage} />
          <Route path={`${process.env.REACT_APP_ROUTE_PREFIX}/login`} component={LoginPage} />
        </Switch>
      </Router>
    </div>
  );
}
export default App;

index.js：

// ...
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

PrivateRoute.jsx：

import React from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';

const PrivateRoute = withRouter(({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        localStorage.getItem('user')
            ? <Component {...props} />
            : <Redirect to={{ pathname: `${process.env.REACT_APP_ROUTE_PREFIX}/login`, 
                        state: { from: props.location } }} />
    )} />
))

登录后：

import history from '../../helpers/history'
//...
// thunk
export const login = (username, password) => dispatch => {
    dispatch(request({ username }));

    authClient.login(username, password)
        .then(
            user => {
                dispatch(success(user));
                // updates the url, but doesn't get caught by BrowserRouter
                // useHistory doesn't work here as it's for stateless components
                history.push(process.env.REACT_APP_ROUTE_PREFIX); 
            },
            error => {
                dispatch(failure(error));
            }
        );
}

模块版本：

    "history": "^5.0.0",
    "react-router-dom": "^5.2.0",

LoginPage 和 ProfilePage 也被 withRouter 包裹

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

好的，我通过使用 LoginPage 属性中的历史记录解决了这个问题：

export const login = (username, password, history) => dispatch => {
   //...
   history.push(process.env.REACT_APP_ROUTE_PREFIX);
   //...
}

    handleSubmit(e) {
        e.preventDefault();

        this.setState({ submitted: true });
        const { username, password } = this.state;
        const { dispatch, history } = this.props;
        if (username && password) {
            dispatch(login(username, password, history));
        }
    }

我不确定这是否是一个好方法。谁能给点建议？

【讨论】：