react-router：切换重定向在 localhost:xxxx 中不起作用。从 baseUrl 重定向到其他页面答案

【问题标题】：react-router: Switch Redirect not working in localhost:xxxx. Redirect from baseUrl to some other pagereact-router：切换重定向在 localhost:xxxx 中不起作用。从 baseUrl 重定向到其他页面
【发布时间】：2018-12-01 08:08:00
【问题描述】：

我必须为我的应用配置路由。我正在本地系统上执行此操作。我使用的包是"react-router": "^4.3.1"、"react-router-dom": "^4.3.1"、"history": "^4.7.2" 和"connected-react-router": "^4.3.0"。

我希望用户在导航到http://localhost:xxxx 时被重定向到http://localhost:xxxx/login。在 prod 的实际情况下，应从 window.location.pathname 中选择 baseUrl，然后将用户重定向到登录。

它没有解决下面代码中的目的。输入http://localhost:3000 后，新路径名http://localhost:3000/login 会在url 栏中可见，但不会加载登录页面。我看到的只是一个空白页。

但是，在下面的代码中，如果我在 History.js 中 return / 并从 Routes.js 中删除第二条路由，登录页面会成功加载。

History.js

import createHistory from 'history/createBrowserHistory';                          

function checkUrl() {                                                              
  let baseUrl = window.location.pathname;                                          
  window.localStorage.setItem('baseUrl', baseUrl);                                 
  return `${baseUrl}`                                                              
}                                                                                  

const history = createHistory({                                                    
  basename: checkUrl(),                                                            
});                                                                                

export default history;

Routes.js

import React from 'react';                                                         
import { Route, Switch, Redirect } from 'react-router-dom';                              
import Login from '../Pages/Login/Login';

const Routes = () => (                                                             
  <Switch>                                                                         
    <Route exact path="/login" component={Login} />                                
    <Route
       exact                                                                        
       path="/"                                                                     
       render={() => (
         <Redirect to="/login" />
       )}
    /> 
  </Switch>
);

export default Routes;

商店

import { connectRouter, routerMiddleware } from 'connected-react-router/immutable';
import history from '../history/history';

const routeMiddleware = routerMiddleware(history); 
//I have applied the middleware and configured rest of the store, here only exposed relevant information that I am using `connected-react-router`

我遇到了很多文章来解决这个问题，尝试了很多 P&C。但我无法理解这一点。

【问题讨论】：

检查你的登录组件，如果有东西（比如 redux）没有阻止更新。您也可以尝试切换路线顺序并将“/”路线放在第一位。我正在以类似的方式使用它并且它正在工作

标签： javascript reactjs react-router

【解决方案1】：

您的更新很可能被阻止。见：https://reacttraining.com/react-router/web/guides/redux-integration 开玩笑的是将连接组件的导出包装在“withRouter”中，以便添加路由道具，由于道具差异触发重新渲染

引用上面引用的链接：

“通常，React Router 和 Redux 可以很好地协同工作。但有时，应用的组件在位置更改时不会更新（子路由或活动导航链接不会更新）。

如果发生这种情况：

组件通过 connect()(Comp) 连接到 redux。该组件不是“路由组件”，这意味着它不会像这样呈现：问题在于 Redux 实现了 shouldComponentUpdate 并且如果它没有从路由器接收到 props，则没有任何迹象表明有任何变化。这很容易解决。找到你连接你的组件的地方，然后用路由器把它包装起来。”

【讨论】：

我的登录组件是一个无状态组件。
组件是否与 redux store 连接无关紧要。它有道具，并评估差异，尝试一下，看看它是否有效。
我试过export default withRouter(connect(null, null)(Login)) 和export default withRouter(Login)。还是同样的问题。
您帖子的后半部分，您提到了一个空白屏幕，如果您删除第二条路线，您会看到登录屏幕。这意味着它无法匹配您的路线，并且切换回退到仅路线.您能否尝试从登录路径中省略确切的关键字
抱歉，由于使用了连接路由器，我以为您使用的是 redux。无论如何，您的代码似乎都想进入登录页面。如果是这种情况，请使其成为 switch 语句中唯一没有路径的路由。否则，如果！使用组件登录到主页

【解决方案2】：

当我将 App.js 包裹在 withRouter 中后，它就开始正常工作了。

【讨论】：