Javascript 当我使用history.push（）时，我的组件不'；t render，我需要刷新页面

我正在使用react路由器dom来创建我的路由

我有一个名为

AppRouter.js

的文件，其中包含我的路径：

const AppRouter = props => {

    const loading = useSelector(state => state.loadingStates)
    return (
        <Router>
            <Switch>
                <div>
                    <Route exact path="/">
                        <Redirect
                            to={{
                                pathname: "/login",
                            }}
                        />
                    </Route>
                    <Route path="/home" component={Home} />
                    <Route path="/registrar" component={LoginWrapper} />
                    <Route path="/login" component={LoginWrapper} />
                </div>
            </Switch>
        </Router>
    );
}

export default AppRouter

浏览器中的链接更新为

localhost:3333/home

，但我的组件仍然显示登录页面，我需要重新加载到组件渲染

由发出makeLogin请求的文件saga.js导入的Myhistory.js：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

---

为什么会这样？如何修复此问题？

您需要将自定义历史记录传递给路由器

**** see change ****
import history from "../path to your history.js file";

const AppRouter = props => {

const loading = useSelector(state => state.loadingStates)
return (

    **** see change ****
    <Router history={history }>
        <Switch>
            <div>
                <Route exact path="/">
                    <Redirect
                        to={{
                            pathname: "/login",
                        }}
                    />
                </Route>
                <Route path="/home" component={Home} />
                <Route path="/registrar" component={LoginWrapper} />
                <Route path="/login" component={LoginWrapper} />
            </div>
        </Switch>
    </Router>
);
}

export default AppRouter

****请参见更改****
从“./path to your history.js文件”导入历史记录；
const AppRouter=props=>{
常量加载=使用选择器（状态=>state.loadingStates）
返回(
****看到变化了吗****
);
}
导出默认批准程序

---

查看此页面

历史定义在哪里？@Shmli-Breuer请查看我的更新，我写了相关内容。历史在名为history.js的文件中定义，该文件由生成makeLogin（）的类导入，React路由器不是这样工作的。您需要在成功登录后有条件地呈现

（可以通过更改loggedIn状态来触发）。您可能希望将所有授权的路由打包到一个HOC中，如下所示：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

**** see change ****
import history from "../path to your history.js file";

const AppRouter = props => {

const loading = useSelector(state => state.loadingStates)
return (

    **** see change ****
    <Router history={history }>
        <Switch>
            <div>
                <Route exact path="/">
                    <Redirect
                        to={{
                            pathname: "/login",
                        }}
                    />
                </Route>
                <Route path="/home" component={Home} />
                <Route path="/registrar" component={LoginWrapper} />
                <Route path="/login" component={LoginWrapper} />
            </div>
        </Switch>
    </Router>
);
}

export default AppRouter