реакции-маршрутизатор: коммутатор Redirect не работает на локальном хосте: xxxx.Перенаправить из baseUrl на другую страницу

Question

Мне нужно настроить маршрутизацию для моего приложения.Я делаю это в моей локальной системе.Пакеты, которые я использую: "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "history": "^4.7.2" и "connected-react-router": "^4.3.0".

Я хочу, чтобы пользователь перенаправлялся на http://localhost:xxxx/login, когда он переходит на http://localhost:xxxx.В реальном сценарии на prod, baseUrl следует выбрать из window.location.pathname, а затем пользователь должен быть перенаправлен для входа в систему.

Это не решает задачу в приведенном ниже коде.При вводе http://localhost:3000 новое имя пути http://localhost:3000/login отображается в строке URL, но страница входа не загружается.Все, что я вижу, это пустая страница.

Однако в приведенном ниже коде, если я return / в History.js и удаляю второй маршрут из 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;

Store

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.Но я не могу обернуть голову вокруг этого.

Answer 1

Он начал работать правильно, как только я завернул App.js в withRouter.

Answer 2

Скорее всего, ваши обновления заблокированы.См .: https://reacttraining.com/react-router/web/guides/redux-integration Суть в том, чтобы обернуть ваш экспорт подключенного компонента в 'withRouter' так, чтобы добавлялись реквизиты маршрута, вызывая повторный рендеринг из-за различий в опорах

Цитированиессылка выше:

«Обычно React Router и Redux прекрасно работают вместе.Однако иногда в приложении может быть компонент, который не обновляется при изменении местоположения (дочерние маршруты или активные навигационные ссылки не обновляются).

Это происходит, если:

Компонентподключен к редуксу через connect () (Comp).Компонент не является «компонентом маршрута», то есть он не отображается так: проблема в том, что Redux реализует shouldComponentUpdate, и нет никаких признаков того, что что-то изменилось, если он не получает реквизиты от маршрутизатора.Это просто исправить.Найдите, где вы подключаете свой компонент, и оберните его с помощью роутера. ”