5

我正在学习反应。但是我对Vue很熟悉。在带有 Vue Router 的 Vue 中，我们可以拥有一组基于对象的路由，例如，

const routes = [
{
   name : "Login",
   path : "/login",
   component : ()=> import('views/Login.vue') //for lazy loading
   meta : {
    auth : false // this means no authentication needed for this particular route
    }
},
{
   name : "Dashboard",
   path : "/dashboard",
   component : ()=> import('views/Dashboard.vue') //for lazy loading
   meta : {
    auth : true // this means authentication needed for this particular route if the user is not authenticated, they will be redirected to login page
    },
}]

到目前为止，我尝试如下：

登录.jsx

const Login = () => {
  const onClick = () => {
    localStorage.setItem("token", "admin");
  };
  return <button onClick={onClick}>Login</button>;
};

export default Login;

仪表板.jsx

const Dashboard = () => {
  return <h1>Dashboard</h1>;
};

export default Dashboard;

应用程序.js

import React, { Fragment } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import Dashboard from "./Dashboard";
import Login from "./Login";

const App = () => {
  const routes = [
    {
      path: "/login",
      component: Login,
      auth: false,
    },
    {
      path: "/dashboard",
      component: Dashboard,
      auth: true,
    },
    {
      path: "/example",
      component: Example,
      auth: true,
    },
  ];
  return (
    <>
      <Switch>
        {routes.map((route, index) => {
          return (
            <Fragment key={index}>
              {route.auth ? (
                <>
                  <Route
                    exact
                    path={`${route.path}`}
                    component={route.component}
                  />
                 </>
              ) : (
                <>
                  <Route
                    exact
                    path={`${route.path}`}
                    component={route.component}
                  />
                </>
              )}
            </Fragment>
          );
        })}
      </Switch>
    </>
  );
};

export default App;

但在上述方法中，我总是被重定向到“/login”。有没有办法解决这个问题？提前致谢

4

2 回答 2

2

也许这个React-View-Router包可以帮助你。代替 react-router-dom，试试这个包，你可以按照 vue-router 的语法

于 2021-08-09T14:26:59.827 回答
0

首先，你不应该像这样在 React 中使用 Router。

视频：https ://www.youtube.com/watch?v=Law7wfdg_ls

文档：https ://reactrouter.com/

您的代码中发生的是：

您正在运行地图并且第一项是“登录”，这就是为什么当您的数组的第一项来到地图时它重定向到“登录”并且发生这种情况的那一刻您的应用程序切换到不同的路线和接下来的两次迭代因为您的地图将无法执行。

这就是我在任何应用程序中执行此操作的方式，这对于大规模应用程序非常有用：（这是 sudo 代码）

// code for your router.js JSX

<BrowserRouter>
  <Switch>
    // you can define your other routes here
    <AppRouter
      path={"/profile"}
      exact
      layout={AuthLayout}
      component={Profile}
    />
  </Switch>
</BrowserRouter>;

// below functions ideally should written in a utility file

const AuthLayout = withRouter((props) => {
  const [View, setView] = useState(null);
  useEffect(() => {
    setView(
      // you can write your own check here
      localStorage.getItem("access_token") ? (
        props.children
      ) : (
        <Redirect to="/" />
      )
    );
  }, [props]);

  return (
    <div className="App-Main-Div">
      <div className="main-section">
        <Base header footer pathName={pathName}>
          {View}
        </Base>
      </div>
    </div>
  );
});

const AppRouter = withRouter(
  ({ component: Component, layout: Layout, ...rest }) => (
    <Route
      {...rest}
      render={(props) => (
        <>
          <Layout>
            <Component {...props}></Component>
          </Layout>
        </>
      )}
    ></Route>
  )
);


// after doing all this you just need to put your router file in your App.js return statement
// which might look like this

const App =()=>{
    // this router is your custom router you need to import it also
    return <Router/>;
}

于 2021-07-03T13:34:27.743 回答