我使用的是react-router-dom@5.1.2这个项目是用一个基本的Create React App创建的。我在index.js中有下面的代码
<BrowserRouter basename="/login"> <App /> </BrowserRouter>
当我启动开发服务器时,它仍然指向localhost:3000。理想情况下,它应该指向localhost:3000/login。
localhost:3000
localhost:3000/login
lnxxn5zx1#
basename不会重定向,它只是通知路由器在您的路由器将读取和修改的URL部分之前有一段URL。在你的路由中,只要在底部添加一个Redirect,这样如果你的其他路由都不匹配,它会带你到登录页面。假设你没有/路由,这将完成你需要的。
basename
Redirect
/
vd8tlhqk2#
默认情况下,需要在package.json中指定homePage: '/login'来加载此路由。
homePage: '/login'
laik7k3q3#
如果您的开发服务器使用的入口点与生产不同(例如NX的bootstrap.tsx),那么您可以使用下面的代码自动将开发人员推到正确的入口点。请注意,这纯粹是为了DX目的,我不建议在任何生产场景中使用这样的JavaScript重定向。
bootstrap.tsx
root.render( <StrictMode> <BrowserRouter basename="/login"> <App /> </BrowserRouter> </StrictMode> ) if (window.location.pathname === "/") { window.location.replace("/login") }
3条答案
按热度按时间lnxxn5zx1#
basename
不会重定向,它只是通知路由器在您的路由器将读取和修改的URL部分之前有一段URL。在你的路由中,只要在底部添加一个
Redirect
,这样如果你的其他路由都不匹配,它会带你到登录页面。假设你没有/
路由,这将完成你需要的。vd8tlhqk2#
默认情况下,需要在package.json中指定
homePage: '/login'
来加载此路由。laik7k3q3#
如果您的开发服务器使用的入口点与生产不同(例如NX的
bootstrap.tsx
),那么您可以使用下面的代码自动将开发人员推到正确的入口点。请注意,这纯粹是为了DX目的,我不建议在任何生产场景中使用这样的JavaScript重定向。