我想在我的 React 應用程式中設定私有路由。我創建了兩個組件。ParivateRoute.js 和 ParivateRoute.js，我在 App.js 中匯入這兩個組件。我正在基于令牌設定私有路由，如果存在令牌，則設定私有路由，如果令牌為空，則應設定公共路由。
我嘗試了一些代碼，設定了我的私有路由，但沒有設定我的公共路由。
我在公共路由中面臨這個問題，每當登錄表單（電子郵件和密碼）的兩個欄位都為空并且我點擊登錄按鈕時，路徑就會像這樣 http://localhost:3000/?email=&password=
雖然不應該如此。http://localhost:3000/每當我單擊登錄按鈕并且我的兩個欄位（電子郵件和密碼）都為空時，我希望路徑是這樣的。
所以為此我不知道如何得到它。我需要幫助正確設定路由路徑。
請多一個幫助，我還想在多個組件（如登錄和注冊）上設定公共路由。那我該怎么做呢？
下面是我的代碼。
登錄.js
import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { useNavigate, Link } from "react-router-dom";
import RequireAuth from "./PrivateRoute";
const Login = ({ setTokenData }) => {
const initialValues = {
email: "",
password: "",
};
const [userData, setUserData] = useState(initialValues);
const authenticateUser = () => {
const localInfo = JSON.parse(localStorage.getItem("signUpUser"));
localInfo?.map((item) => {
const userName = item.email;
const userPassword = item.password;
if (userName === userData.email && userPassword === userData.password) {
console.log("success");
const token = Math.random().toString(36).substr(2, 5);
console.log("token is:", token);
sessionStorage.setItem("token", JSON.stringify(token));
setTokenData(token);
toUsersTable();
} else {
console.log("failure");
return false;
}
});
setUserData(initialValues);
};
const navigateToUsersTable = useNavigate();
const toUsersTable = () => {
return navigateToUsersTable("/usersTable");
};
return (
<>
<Form className="loginForm">
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email Address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
value={userData.email}
name="email"
onChange={(e) =>
setUserData({ ...userData, [e.target.name]: e.target.value })
}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
name="password"
value={userData.password}
onChange={(e) =>
setUserData({ ...userData, [e.target.name]: e.target.value })
}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox"></Form.Group>
<Button
variant="primary"
type="submit"
onClick={() => authenticateUser()}
>
Login
</Button>
<div className="txtToSignUpBtn">
<span>OR</span> <Link to="/signUp">Click here to Register</Link>
</div>
</Form>
<RequireAuth authenticateUser={authenticateUser} />
</>
);
};
export default Login;
私有路由.js
import React from "react";
import { Route, Navigate, Routes } from "react-router-dom";
import Login from "./Login";
import UsersTable from "./UsersTable";
const PrivateRoute = ({ ...rest }) => {
console.log("rest is", { ...rest });
const token = JSON.parse(sessionStorage.getItem("token"));
console.log(token);
return (
<Routes>
<Route {...rest} element={token ? <UsersTable /> : <Navigate to="/" />} />
</Routes>
);
};
export default PrivateRoute;
公共路由.js
import React from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import Login from "./Login";
const PublicRoute = ({ ...rest }) => {
const token = JSON.parse(sessionStorage.getItem("token"));
return (
<Routes>
<Route
{...rest}
element={token ? <Navigate to="/usersTable" /> : <Login />}
/>
</Routes>
);
};
export default PublicRoute;
應用程式.js
import { Layout } from "antd";
import React from "react";
import Login from "./Login";
import SignUp from "./SignUp";
import UsersTable from "./UsersTable";
import PublicRoute from "./PublicRoute";
import PrivateRoute from "./PrivateRoute";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
const App = () => {
return (
<>
<Layout>
<Router>
<Routes>
<Route element={<SignUp />} exact path="/signUp" />
</Routes>
<PublicRoute element={<Login />} exact path="/" />
<PrivateRoute element={<UsersTable />} exact path="/usersTable" />
</Router>
</Layout>
</>
);
};
export default App;
提前致謝。
uj5u.com熱心網友回復：
當您單擊登錄按鈕時，http://localhost:3000/?email=&password=您沒有指定method它應該使用的yow 表單上的 url 更改為bcuz并且默認值為GET. 這就是為什么 yow 表單輸入出現在 url 中的原因，如果您不想在 url 中向它們發送表單欄位，則需要將方法設定為 post method="POST"。現在它們的欄位不會在 url 中發送，但由于我們不在 90 年代，因此您不必這樣做。您需要做的是阻止默認行為。
從按鈕中洗掉 onClickHandler 并將其添加到表單中
const onSubmit = event => {
event.preventDefault();
authenticateUser();
};
...
return(
<Form onSubmit={onSubmit}>
...
<Button variant="primary" type="submit">Login</Button>
但不是 onClick 它是 onSubmit 確保preventDefault
uj5u.com熱心網友回復：
在react-router-dom自定義路由組件中，處理業務邏輯并呈現childrenprop 或 an Outletfor 嵌套路由或宣告性重定向的包裝器組件被淘汰、替換或首選。
由于您詢問在“私有”路由上放置多個組件，因此我建議使用該Outlet實作。
const PrivateWrapper = () => {
const token = JSON.parse(sessionStorage.getItem("token"));
console.log(token);
return token ? <Outlet /> : <Navigate to="/login" replace />;
};
const PublicWrapper = () => {
const token = JSON.parse(sessionStorage.getItem("token"));
return token ? <Navigate to="/" replace /> : <Outlet />;
};
...
const App = () => {
return (
<>
<Layout>
<Router>
<Routes>
<Route path="/" element={<div>Home Page</div>} />
<Route path="/signUp" element={<SignUp />} />
<Route element={<PublicWrapper />}>
<Route path="/login" element={<Login />} />
.... other public routes ....
</Route>
<Route element={<PrivateWrapper />}>
<Route path="/usersTable" element={<UsersTable />} />
.... other private routes ....
</Route>
</Routes>
</Router>
</Layout>
</>
);
};
我沒有看到您在哪里發出任何命令式導航，包括任何 queryString 引數，但據我所知，在提交時并沒有阻止默認表單操作。將提交處理程式移動到Form組件的onSubmit事件處理程式并呼叫preventDefault提交事件物件。
const authenticateUser = event => {
event.preventDefault();
...
};
...
<Form className="loginForm" onSubmit={authenticateUser}>
...
<Button
variant="primary"
type="submit"
>
Login
</Button>
...
</Form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/403748.html
標籤：
上一篇：沒有路由匹配路徑