我有一个从登录页面开始的React应用程序。当单击登录页面上的登录按钮时，我希望它重定向到主页。我想在进入首页后立即重定向到通知页面。因此路由操作如下：
但是当我单击登录按钮时，它先进入主页，然后进入通知页面，但是尽管我看到的路径为http://localhost:3000/#/notifications，但该页面未加载。页面控制台上没有任何内容。
和我的代码：
App.js
import React, { Component } from 'react';
import {HashRouter, Redirect, Route, Switch} from 'react-router-dom';
import './App.scss';
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));
// Pages
const Login = React.lazy(() => import('./views/Pages/Login'));
const Register = React.lazy(() => import('./views/Pages/Register'));
const Page404 = React.lazy(() => import('./views/Pages/Page404'));
const Page500 = React.lazy(() => import('./views/Pages/Page500'));
class App extends Component {
render() {
return (
<HashRouter>
<React.Suspense fallback={loading()}>
<Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
<Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
<Route exact path="/" name="Login" render={props => <Login {...props}/>} />
<Route path="/home" name="Home" render={props => <DefaultLayout {...props}/>} />
</Switch>
</React.Suspense>
</HashRouter>
);
}
}
export default App;
login.js
import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Login extends Component {
constructor(props) {
super(props);
this.handleOnClick = this.handleOnClick.bind(this);
}
handleOnClick = async (e) => {
e.preventDefault();
this.props.history.push('/home');
}
render() {
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="8">
<CardGroup>
<Card className="p-4">
<CardBody>
<Form>
<div >
<img style={{marginBottom:15}} src={'../../img/HvlLogo.jpg'} alt={'aa'}/>
</div>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Kullanıcı Adı" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Şifre" autoComplete="current-password" />
</InputGroup>
<Row>
<Col xs="6">
<Button color="primary" className="px-4" onClick={this.handleOnClick}> Giriş</Button>
</Col>
</Row>
</Form>
</CardBody>
</Card>
<Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
<CardBody className="text-center">
<div>
<h2>Buraya sitenin kisa aciklamasi girilecek,</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
</div>
</CardBody>
</Card>
</CardGroup>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Login;
defaultLayout.js
import React, { Component, Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import * as router from 'react-router-dom';
import { Container } from 'reactstrap';
import {
AppFooter,
AppHeader,
AppSidebar,
AppSidebarFooter,
AppSidebarForm,
AppSidebarHeader,
AppSidebarMinimizer,
AppBreadcrumb2 as AppBreadcrumb,
AppSidebarNav2 as AppSidebarNav,
} from '@coreui/react';
// sidebar nav config
import navigation from '../../_nav';
// routes config
import routes from '../../routes';
const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
class DefaultLayout extends Component {
loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
signOut(e) {
e.preventDefault()
this.props.history.push('/login')
}
render() {
return (
<div className="app">
<AppHeader fixed>
<Suspense fallback={this.loading()}>
<DefaultHeader onLogout={e => this.signOut(e)}/>
</Suspense>
</AppHeader>
<div className="app-body">
<AppSidebar fixed display="lg">
<AppSidebarHeader/>
<AppSidebarForm/>
<Suspense>
<AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
</Suspense>
<AppSidebarFooter/>
<AppSidebarMinimizer/>
</AppSidebar>
<main className="main">
<AppBreadcrumb appRoutes={routes} router={router}/>
<Container fluid>
<Suspense fallback={this.loading()}>
<Switch>
{routes.map((route, idx) => {
return route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<route.component {...props} />
)}/>
) : (null);
})}
<Redirect exact from="/home" to="/notifications"/>
</Switch>
</Suspense>
</Container>
</main>
</div>
<AppFooter>
<Suspense fallback={this.loading()}>
<DefaultFooter/>
</Suspense>
</AppFooter>
</div>
);
}
}
export default DefaultLayout;
routes.js
import React from 'react';
const Alerts = React.lazy(() => import('./views/Notifications/Alerts'));
const Badges = React.lazy(() => import('./views/Notifications/Badges'));
const Modals = React.lazy(() => import('./views/Notifications/Modals'));
// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [
{ path: '/', exact: true, name: 'Login' },
{ path: '/home', exact: true, name: 'Home'},
{ path: '/notifications', exact: true, name: 'Notifications',component: Alerts },
{ path: '/notifications/alerts', exact: true,name: 'Alerts', component: Alerts },
{ path: '/notifications/badges', exact: true,name: 'Badges', component: Badges },
{ path: '/notifications/modals', exact: true,name: 'Modals', component: Modals },
];
export default routes;
使用BrowserRouter代替HashRouter