Question

新的反应，我使用redux，hook创建登录和仪表板页面。使用history.push（'/'）时，我的应用程序未呈现相应的组件，请在下面的不同部分查看：

// App/App.jsx
...
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
import { LoginPage } from '../LoginPage';
import { history } from '../_helpers';
function App() {
    <Router history={history}>
        <Switch>
            <Route exact={true} path="/" render={() => (
                <h1>Welcome</h1>
            )} />
            <Route path="/login" component={ LoginPage } />
            <Redirect from="*" to="/" />
        </Switch>
    </Router>
}
export {App}

现在在我的入口点页面上：

// index.jsx
import { Provider } from 'react-redux'
import { App } from './App';
import { store } from './_helpers'

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
)

使用react钩子的登录组件，为简单起见，我仅在此处添加重要部分：

// src > LoginPage > LoginPage.jsx
import { userActions } from '../_actions';
const handleSubmit = (e) => {
    e.preventDefault();
    if(email && password) {
        dispatch(userActions.login(email,password));
    }
}
return(
    <form name="form" onSubmit={handleSubmit}>
        <input type="email" 
            name="email" 
            onChange={(event) => inputChangeHandler(event)} />
        <input type="password" 
            name="password" 
            onChange={(event) => inputChangeHandler(event)} />
        <button className="btn btn-primary">Submit</button>
    </form>
);

动作组件，我也调用API服务并推送历史记录以更改页面：

// src > _actions > user.actions.jsx
...
import { history } from '../_helpers';
import { userService } from '../_services';
function login(email, password) {
    return dispatch => {
        userService.login(email, password)
        .then(user => { 
            dispatch(success(user));
            history.push('/'); // <<< push history
         },
         error => {
             .... handle errors here
         })
    }
}
....

最后一个是历史文件 // src> _helpers> helpers.jsx ... 从“历史”导入{createBrowserHistory}；导出const历史= createBrowserHistory（）;

如您所见，登录成功后，我想将页面从（my_domain.com/login）更改为my_domain.com/），但未呈现该组件，即使浏览器显示了正确的网址，该组件仍保留在登录页面上：my_domain.com /

对不起，我的英语不好，但是如果您想让更多信息对您有所帮助，谢谢您。

因此，如果有人可以帮助我解决此问题，我将不胜感激。

谢谢。

React推送历史记录不会呈现

0 个答案: