如何改变默认url时，react应用程序运行与yarn start或npm start?

Question

我创建了一个react应用程序，其中我有一个登录页面作为第一页，我们登录它进入应用程序。所以当我运行应用程序时使用"yarn start"应用程序运行在"localhost:8082";默认情况下，但我希望当我运行"yarn start"命令，它显示url，如"localhost"8082/Login"因为第一页是登录页。

当我成功登录时，它再次显示"localhost:8082"但我想登录后显示"localhost:8082/Home"

有没有办法像我提到的那样改变url

附加一些代码供参考。

应用程序。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;

路由器。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;

所以我想要第一页当我运行"yarn start"命令将为"localhost:8082/Login"当我登录时，url必须是"localhost:8082/home"。

我已经尝试过通过不同的方式来实现它，但我无法这样做。我不想在package中添加主页元素。

Answer 1

除了启动应用程序并直接导航到"/login"之外，可以在应用程序的根组件中使用挂载useEffect钩子手动重定向到"/login"。我真的建议实现受保护的路由，并将home"/"路由置于保护之下，这样未经身份验证的用户将自动重定向到"/login"。

创建受保护的已认证和未认证路由组件。

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

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

import Routers from "./components/Routers";
function App() {
return (
<div>
<Routers />
</div>
);
}