Я застрял на маршрутизации моего приложения в течение нескольких дней. У меня есть форма, я хочу, чтобы пользователь был перенаправлен после успешной отправки формы. Я разместил логику после успешного API. Мой URL-адрес изменяется, но компонент, который должен быть загружен по этому URL-адресу, не загружается.

import { browserHistory } from '../router/router';
...

export const storeRecord=(data)=>{
    return function(dispatch, getState){
      //console.log('state',getState());
      const {authToken, userId} = getState().authReducer;
      token= authToken;
        data.userId = userId;
        const url = 'investment/store';
        apiCall(url, data, dispatch,'post').then((data)=>{
          try{
            if(data.status=== 200){
              //let data = apiResponse.data
              console.log('success',data);
              browserHistory.push('/');
              //dispatch(push('/'));
            }
          }
          catch(error){
            console.log('returnedError',error);

          }
        }, (error)=>{console.log(error)});
        
        
    }
}

Вот и мой маршрут:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
...
export const browserHistory = createBrowserHistory();


const AppRouter=()=>{

    return(<Router>
        <LoaderModal />
        <Switch>
            <Route path="/" exact component={LandingPage} />
            <PublicRouter path="/register" exact component={SignupPage} />
            <PublicRouter path="/login" exact component={LoginPage} />
            <PrivateRoute path="/investment/new" exact component={InvestmentForm} />
            <Route component={NotFoundPage} />
            
        </Switch>
    </Router>)
}

export default AppRouter;

Я использую response-router-dom для изменения маршрута и history для перенаправления браузера. Может кто-нибудь помочь мне в этом, пожалуйста

1
mykoman 20 Апр 2020 в 14:17

2 ответа

Вам необходимо использовать тот же объект истории, который используются вашими модулями маршрутизатора для динамической маршрутизации.

Самое простое решение - не использовать browserRouter, а использовать маршрутизатор с пользовательской историей.

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
...
export const browserHistory = createBrowserHistory();


const AppRouter=()=>{

    return(<Router history={browserHistory}>
        <LoaderModal />
        <Switch>
            <Route path="/" exact component={LandingPage} />
            <PublicRouter path="/register" exact component={SignupPage} />
            <PublicRouter path="/login" exact component={LoginPage} />
            <PrivateRoute path="/investment/new" exact component={InvestmentForm} />
            <Route component={NotFoundPage} />

        </Switch>
    </Router>)
}

export default AppRouter;

И тогда ваше действие будет выглядеть

import { browserHistory } from '../router/router';
...

export const storeRecord=(data)=>{
    return function(dispatch, getState){
      const {authToken, userId} = getState().authReducer;
      token= authToken;
        data.userId = userId;
        const url = 'investment/store';
        apiCall(url, data, dispatch,'post').then((data)=>{
          try{
            if(data.status=== 200){
              browserHistory.push('/');
            }
          }
          catch(error){
            console.log('returnedError',error);

          }
        }, (error)=>{console.log(error)});


    }
}
0
Shubham Khatri 20 Апр 2020 в 13:00

Вы можете использовать следующий код вместо отправки (push ('/')), который вы использовали в компоненте storeRecord.

Window.location.assign ( '/' ) ;

0
Vikas Garg 20 Апр 2020 в 13:26