Перенаправление в Reactjs с React-Router

Question

Я хочу перенаправить на домашнюю страницу после того, как нажал кнопку на странице входа в систему ... Но когда я нажал кнопку в адресной строке, отображается путь к домашней странице (он перенаправляет на домашнюю страницу) ... но это не такНе отображать компонент, соответствующий этому пути. Он по-прежнему показывает страницу входа с адресом домашней страницы. Итак, мне нужно обновить страницу, чтобы отобразить домашнюю страницу. Что здесь не так ???

В моем логинестраница ... это функция, которую я использовал для кнопки onClick ..

gotopage()
  {
        this.props.history.push('/home')
   }

В моем индексе js page ..

import React from "react";
import { render } from "react-dom";
import {BrowserRouter as Router,Route,Redirect ,browserHistory} from "react-router-dom"; 
import { Firstpage } from "./Firstpage";
import { Login } from "./Login";
import { Home } from "./Home";
import createBrowserHistory from 'history/createBrowserHistory'
const history=createBrowserHistory();


    class App extends React.Component {
    render(){
    return(
    <Router history={browserHistory}>
         <div>
        <switch>
        <Route path="/"   component={Firstpage} exact> </Route>
        <Route path="/home"   component={Home}> </Route>
        <Route path="/login"  render={(props) => <Login {...props} history= 
         {history} } />}> </Route>
         </switch>
         </div>
     </Router>
     );
   }
 }

Answer 1

Я бы предложил пару вещей.Так как вы используете React router 4.x, BrowserRouter не имеет истории поддержки согласно документации, чтобы удалить это.Обновите ваш код до следующего и посмотрите, работает ли он.

Измените коммутатор на Switch, и я не вижу его импортированным из реагирующего маршрутизатора.используйте сRouter от реагирующего маршрутизатора в вашем компоненте входа в систему.

export default withRouter(Login)

Обновите конфигурацию основного маршрута следующим образом.

     <Router history={browserHistory}>
        <Switch>
            <Route path="/"   component={Firstpage} exact> </Route>
            <Route path="/home"   component={Home}> </Route>
            <Route path="/login"  render={(props) => <Login {...props}/>}> </Route>
        </Switch>
     </Router>

Подробнее о withRouter, BrowserRouter читайте здесь https://reacttraining.com/react-router/web/api/BrowserRouter.

Подробнее читайте в следующем посте https://medium.com/@AkyunaAkish/understanding-react-router-4-df73a66d96c4