Question

我在页面上创建内容或更新内容时遇到问题。来自例如http:localhost:3000/#/adduser成为http:localhost:3000/?first_name=asdqwe&last_name=asdqwe&email=asdqwe%40gmail.com&gender=Male&password=asdqwe#/adduser。我不知道发生了什么。我已经检查过我的路线，我不明白我的代码出了什么问题。帮助我找出问题所在。请告诉我是否需要更多代码。

app.js

import React from "react";
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, Switch} from "react-router-dom";
import { createHashHistory } from 'history';
import axios from "axios";


import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";
import "assets/scss/argon-dashboard-react.scss";

import AdminLayout from "layouts/Admin.js";
import reducer from './actions/reducer'
import LandingLogin from './layouts/LandingLogin.js'
import LandingRegister from './layouts/LandingRegister.js'


const store = createStore(reducer);
const customHistory = createHashHistory();

class App extends React.Component {

    render () {
        return (
            <Provider store = {store}>
                <Router history={customHistory}>
                    <Switch>
                    <Route path="/admin" render={props => <AdminLayout {...props} />}  />
                    <Route exact path="/" render= {() => <LandingLogin/>} />
                    <Route exact path="/login" render= {() => <LandingLogin/>} />
                    <Route exact path="/register" render= {() => <LandingRegister/>} />
                    </Switch>
                </Router>
            </Provider>
        )
    }
}

export default App;

routes.js

import Index from "views/Index.js";
import AddUser from "views/Component/AddAdmin.js";
import DetailAdmin from "views/Component/DetailAdmin.js";
import AddBuku from "views/Component/AddBuku.js";
import DetailBuku from "views/Component/DetailBuku.js";
import DetailUser from "views/Component/DetailUser.js";
import EditUser from "views/Component/DetailUser.js";
import Icons from "views/Component/Icons.js";
import AddTransaksi from "views/Component/AddTransaksi.js";
import DetailTransaksi from "./views/Component/DetailTransaksi";
import SetPass from "./views/Component/SetPass";

var routes = [
  {
    path: "/index",
    name: "Dashboard",
    icon: "ni ni-tv-2 text-primary",
    component: Index,
    layout: "/admin"
  },
  {
    path: "/addadmin",
    name: "Add Admin",
    icon: "ni ni-bullet-list-67 text-red",
    component: AddUser,
    layout: "/admin"
  },
  {
    path: "/detailadmin",
    name: "Detail Admin",
    icon: "ni ni-bullet-list-67 text-red",
    component: DetailAdmin,
    layout: "/admin"
  },
  {
    path: "/addbuku",
    name: "Add Buku",
    icon: "ni ni-bullet-list-67 text-red",
    component: AddBuku,
    layout: "/admin"
  },
  {
    path: "/detailbuku",
    name: "Detail Buku",
    icon: "ni ni-bullet-list-67 text-red",
    component: DetailBuku,
    layout: "/admin"
  },
  {
    path: "/detailuser",
    name: "Detail User",
    icon: "ni ni-bullet-list-67 text-red",
    component: DetailUser,
    layout: "/admin"
  },
  {
    path: "/edituser",
    name: "Edit User",
    icon: "ni ni-bullet-list-67 text-red",
    component: EditUser,
    layout: "/admin"
  },
  {
    path: "/icons",
    name: "Icons",
    icon: "ni ni-bullet-list-67 text-red",
    component: Icons,
    layout: "/admin"
  },
  {
    path: "/addtransaksi",
    name: "Add Transaksi",
    icon: "ni ni-bullet-list-67 text-red",
    component: AddTransaksi,
    layout: "/admin"
  },
  {
    path: "/dettransaksi",
    name: "Detail Transaksi",
    icon: "ni ni-bullet-list-67 text-red",
    component: DetailTransaksi,
    layout: "/admin"
  },
  {
    path : "/SetPass",
    name : "Change Password",
    icon : "ni ni-bullet-list-67 text-red",
    component : SetPass,
    layout : "/admin"
  }
];
export default routes;

我希望删除＃链接，因为当我们创建某些创建的表单时，它会出现在＃成为我们创建的表单上。对不起，我的解释不好

Answer 1

您需要使用browserHistory而不是hashHistory：

import { browserHistory } from 'history';

此外，请导入{ BrowserRouter as Router }而不是{ Router }。

如何在React js

1 个答案: