反应路由器“#在路线内签名”

Question

我在我的项目中使用react router，因为每个路由都有一个问题，在每个路由器路径的开始处都添加了“#”符号。。例如：http://localhost:3000/#/login

我想去掉那个标志，但我自己解决不了。

我的路由程序是在app.jsIM检查用户是否登录，如果没有登录，那么他将重定向到 /login页面。（

下面是app.js

import React, { Component, Fragment } from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
// import { renderRoutes } from 'react-router-config';
import "./App.scss";
import { connect } from "react-redux";
import { loadUser } from "./actions/authActions";

const loading = () => (
  <div className="animated fadeIn pt-3 text-center">Loading....</div>
);

// Containers
const DefaultLayout = React.lazy(() =>
  import("./containers/DefaultLayout/DefaultLayout")
);

// Pages
const Login = React.lazy(() => import("./views/Login/Login"));
const Register = React.lazy(() => import("./views/Register/Register"));
const Page404 = React.lazy(() => import("./views/Page404/Page404"));
const Page500 = React.lazy(() => import("./views/Page500/Page500"));

class App extends Component {
  componentDidMount() {
    this.props.LOADUSER();
  }

  render() {
    return (
      <HashRouter>
        <React.Suspense fallback={loading()}>
          <Switch>
            {!this.props.isAuthenicated ? (
              <Fragment>
                <Redirect from="*" to="/login" />
                <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} />}
                /> */}
              </Fragment>
            ) : (
              <Route
                name="Home"
                path="/"
                render={props => <DefaultLayout {...props} />}
              />
            )}
          </Switch>
        </React.Suspense>
      </HashRouter>
    );
  }
}

const mapStateToProps = state => ({
  isAuthenicated: state.auth.isAuthenicated,
  isLoading: state.auth.isLoading,
  error: state.error,
  token: state.auth.token
});

const mapDispachToProps = dispach => {
  return {
    //LOGIN: (newUser) => dispach(login(newUser)),
    LOADUSER: () => dispach(loadUser())
  };
};

export default connect(mapStateToProps, mapDispachToProps)(App);

否则他将登录，然后我将使用名为DefaultLayout component的组件渲染它。它有其他用途的所有路由，这些路由使用routes.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 { logout } from "../../actions/authActions";
import { ToastContainer } from "react-toastify";
import Loader from "react-loaders";
import "react-toastify/dist/ReactToastify.css";

import {
  AppHeader,
  AppSidebar,
  AppSidebarFooter,
  AppSidebarForm,
  AppSidebarHeader,
  AppSidebarMinimizer,
  AppBreadcrumb2 as AppBreadcrumb,
  AppSidebarNav2 as AppSidebarNav
} from "@coreui/react";
// sidebar nav config
import _navs from "../../_nav";
// routes config
import routes from "../../routes";
import { connect } from "react-redux";

const DefaultHeader = React.lazy(() => import("./DefaultHeader"));

class DefaultLayout extends Component {
  state = {
    isAuthenicated: true
  };

  loading = () => <Loader type="ball-triangle-path" />;

  signOut(e) {
    e.preventDefault();
    this.props.history.push("/login");
    this.props.LOGOUT();
  }

  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={_navs}
                {...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} {...route.props} />
                        )}
                      />
                    ) : null;
                    //  (
                    //   <Redirect from="*" to="/dashboard" />
                    // );
                  })}

                  <Redirect from="*" to="/" />
                </Switch>
              </Suspense>
              <ToastContainer autoClose={3000} position="bottom-center" />
            </Container>
          </main>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  isAuthenicated: state.auth.isAuthenicated,
  error: state.error
});

const mapDispachToProps = dispach => {
  return {
    LOGOUT: () => dispach(logout())
  };
};

export default connect(mapStateToProps, mapDispachToProps)(DefaultLayout);

routes.js的示例也在下面

const routes =[{
 path: "/",
    exact: true,
    name: "Home",

    component: Dashboard
},
{
    path: "/user_overview",
    name: "Users Overview",
    component: Register
  }]

对于它显示的每条路线#有人能帮我解决路线上的#标志吗？

谢谢你！

Answer 1

您正在使用Hash路由器这就是此路由器的目的。

通常使用它是为了阻止服务器获取这些路由。

如果您想使用真正的路由，只需将其替换为Browser路由器。

请注意，您的服务器需要能够支持这些路由。导航到某个路由，如/some/page按重新加载，确保服务器返回客户端代码。