Question

我正在使用react-router-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

我的index.js渲染此文件路由器：

ReactDOM.render(
    <Provider store={store}>
            <AppRouter/>
    </Provider>, document.getElementById('root'));

因此，当我转到localhost:3333时，登录页面将重定向我。在登录页面中，用户进行登录后，我执行history.push('/home')：

function* makeLogin(action) {
    yield put(allActions.loadingActions.startLoading());
    try {    
        const { data } = yield call(api.post, '/login', action.payload);
        yield put(allActions.loginActions.setUser(data))
        yield put(allActions.loadingActions.endLoading());
        localStorage.setItem('currentUser', JSON.stringify(data))
        history.push('/home')
    } catch (e) {
        console.log(e)
    }
}

我的浏览器中的链接更新为localhost:3333/home，但我的组件仍显示登录页面，我需要重新加载到组件渲染。

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

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

为什么会这样？我该如何解决？

Answer 1

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

**** 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

查看此页面for reference

当我使用history.push（）时，我的组件未呈现，我需要刷新页面

1 个答案: