[英]How to change the default url when a react app is run with yarn start or npm start?
I have created a react app in which I have a login page as the first page and we login it enters into the application.我创建了一个反应应用程序,其中我有一个登录页面作为第一页,我们登录它进入应用程序。 So when I run the app using "yarn start" the app runs at "localhost:8082" by default but I want that when I run "yarn start" command it shows the url like "localhost"8082/Login" because the first page is the login page.
因此,当我使用“yarn start”运行应用程序时,该应用程序默认在“localhost:8082”运行,但我希望当我运行“yarn start”命令时,它显示 url,如“localhost”8082/Login”,因为第一页是登录页面。
And when I successfully logged in it again shows "localhost:8082" but I want after login it shows "localhost:8082/Home".当我再次成功登录时显示“localhost:8082”,但我想在登录后显示“localhost:8082/Home”。
So is there any way to change the url like this that I mentioned.那么有没有办法像我提到的那样改变 url。
Attaching some code for reference.附上一些代码供参考。
App.tsx code:- App.tsx 代码:-
import "./css/App.css";
import {
AuthenticatedTemplate,
UnauthenticatedTemplate,
} from "@azure/msal-react";
import { Login } from "./pages/Login";
import Routers from "./components/Routers";
function App() {
return (
<div>
<AuthenticatedTemplate>
<Routers />
</AuthenticatedTemplate>
{
<UnauthenticatedTemplate>
<Login />
</UnauthenticatedTemplate>
}
</div>
);
}
export default App;
Routers.tsx code:- Routers.tsx 代码:-
import { BrowserRouter, Routes, Route, Outlet} from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
function Routers() {
return (
<div className="Routers">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Home" element={<Home />} />
<Route path="/About" element={<About />} />
<Route path="/Contact" element={<Contact />} />
</Routes>
<Outlet />
</BrowserRouter>
</div>
);
}
export default Routers;
So I want that the first page when I run "yarn start" command will be "localhost:8082/Login" and when I login the url must be "localhost:8082/Home".所以我希望当我运行“yarn start”命令时的第一页是“localhost:8082/Login”,当我登录 url 时必须是“localhost:8082/Home”。
I have tried it to achieve it through different ways but I was unable to do so.我已经尝试通过不同的方式来实现它,但我无法这样做。 I don't want to add a homepage element in package.json as it is not working in my case.
我不想在 package.json 中添加主页元素,因为它在我的情况下不起作用。
Short of just starting the app and navigating to "/login"
directly you could use a mounting useEffect
hook in the root component of your app to manually redirect to "/login"
.除了启动应用程序并直接导航到
"/login"
之外,您还可以在应用程序的根组件中使用挂载useEffect
挂钩来手动重定向到"/login"
。 I'd really suggest implementing protected routes and place the home "/"
route under protection so unauthenticated users will be redirected to "/login"
automatically.我真的建议实施受保护的路由并将主页
"/"
路由置于保护之下,这样未经身份验证的用户将被自动重定向到"/login"
。
Create protected authenticated and unauthenticated route components.创建受保护的经过身份验证和未经身份验证的路由组件。
import { Navigate, Outlet, useLocation } from 'react-router-dom';
import {
AuthenticatedTemplate,
UnauthenticatedTemplate,
} from "@azure/msal-react";
import { useAuth } from '../path/to/AuthContext'; // <-- you'll need to implement this, however it fits with the Azure authentication
const PrivateRoutes = () => {
const location = useLocation();
const { isAuthenticated } = useAuth();
if (isAuthenticated === undefined) {
return null; // or loading indicator/spinner/etc
}
return isAuthenticated
? (
<AuthenticatedTemplate>
<Outlet />
</AuthenticatedTemplate>
)
: <Navigate to="/login" replace state={{ from: location }} />;
}
const AnonymousRoutes = () => {
const { isAuthenticated } = useAuth();
if (isAuthenticated === undefined) {
return null; // or loading indicator/spinner/etc
}
return isAuthenticated
? <Navigate to="/" replace />
: (
<UnauthenticatedTemplate>
<Outlet />
</UnauthenticatedTemplate>
);
}
Routers.tsx路由器.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import { Login } from "./pages/Login";
import { AnonymousRoutes, PrivateRoutes } from '../components/auth';
function Routers() {
return (
<div className="Routers">
<BrowserRouter>
<Routes>
<Route element={<PrivateRoutes />}>
<Route path="/" element={<Home />} />
<Route path="/Home" element={<Home />} />
<Route path="/About" element={<About />} />
<Route path="/Contact" element={<Contact />} />
</Route>
<Route element={<AnonymousRoutes />}>
<Route path="/login" element={<Login />} />
</Route>
</Routes>
<Outlet />
</BrowserRouter>
</div>
);
}
App.tsx应用程序.tsx
import Routers from "./components/Routers";
function App() {
return (
<div>
<Routers />
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.