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

Posted 2023-02-21

【中文标题】反应路由器“#在路由内部签名”

【英文标题】：react router "# sign inside route"

【发布时间】：2020-03-13 11:51:12

【问题描述】：

我在我的项目中使用 react-router， 因为有一个问题是每个路由“#”符号都添加在每个路由器路径的开头.. 前“：http://localhost:3000/#/login

我想删除那个 # 符号，但我自己无法解决。

我的路由过程是 在 app.js 中，我检查用户是否已登录，如果未登录，他将重定向到 /login 页面。（为此，它也将路径显示为http://localhost:3000/#/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 的路由。

下面是 DefaultLayout 组件

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
  ]

对于它显示的每条路线 # 任何人都可以帮我解决 # 在路线路径中签名的问题吗？

谢谢！

【参考方案1】：

你正在使用HashRouter这是这个路由器的目的。

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

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

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

【讨论】：

非常感谢您的回答对我有帮助:)