嘿,伙计们！我正在开发一个反应应用程序，我想让用户直接进入登录屏幕而不是主页，但我似乎做不到，有什么提示吗？

Question

这是我的app.js，我想让用户在访问网站时直接转到/auth，而不是/home，登录后，他们会被带到主页

return (
<Grid
container
direction="column"
className={classes.app}>
<Header />
<Grid item xs={12} className={classes.body}>
<Switch>
<Redirect exact from="/" to="/home" />
<Route exact path="/home" component={Home} />
<Route path="/auth" component={withAuthenticator(MyAuth)} />
<Route path="/user" component={withAuthenticator(User)} />
<Route path="/product" component={withAuthenticator(Product)} /
<Route path="*" component={NotFound} />
</Switch>
</Grid>
<Grid item xs={12} className={classes.footer}>
<Footer />
</Grid>
)

Answer 1

1. 第一个解决方案是在Route中使用render方法。只需检查使用是否是Authed显示主页，如果不是显示登录页面。路线如下：

   <Switch>
   <Route path="/" render={()=> isAuthed ? <Home/> : <Login/>} />
   <Route exact path="/home" component={Home} />
   <Route path="/auth" component={withAuthenticator(MyAuth)} />
   <Route path="/user" component={withAuthenticator(User)} />
   <Route path="/product" component={withAuthenticator(Product)} /
   <Route path="*" component={NotFound} />
   </Switch>
   

2. 第二个解决方案。它使用<Home/>组件内部的条件。

Home.js

const Home = ()=> {
useEffect(()=>{
isAuthed && <Redirect to="/login" />
},[])
return(....)
}

路线会这样

<Switch>
<Route path="/home" component={Home} />
<Route from="/login"component={Login} />
<Route path="/auth" component={withAuthenticator(MyAuth)} />
<Route path="/user" component={withAuthenticator(User)} />
<Route path="/product" component={withAuthenticator(Product)} /
<Route path="*" component={NotFound} />
</Switch>

Answer 2

我在项目中解决了这个问题。。。首先，你需要有一个我通常称之为PrivateNote的组件，它就是这样的(你可以在这里看到它是如何工作的完整解释。我在那篇文章中学习了这个解决方案，但你可以在网上搜索更多：

import React from 'react';
import {useSelector} from "react-redux";
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({component: Component, ...rest}) => {
const authenticated = useSelector(state=> state.auth.login.authenticated);
return (
<Route
{...rest}
render={(props) => authenticated === true
? <Component {...props} />
: <Redirect to={{pathname: '/login', state: {from: props.location}}}/>
}
/>
)
};
export default PrivateRoute;

这是HOC，如果你试图获得的路线是私人的或非私人的，它会显示或隐藏你的组件。然后你只需要在你的路线文件中使用它，如下所示：

import React from 'react';
import { Route } from 'react-router-dom';
import TurnosCreatePage from "../views/TurnosCreatePage";
import TurnosListPage from "../views/TurnosListPage";
import PrivateRoute from "./Routes Component/PrivateRoute";
export default [
<PrivateRoute path="/turnos/create" component={TurnosCreatePage} exact key="create" />, //this is a private route example
<Route path="/turnos/list/:id" component={TurnosListPage} key="list" />, //this a public route example
];

然后你只需要在你的app.js中导入你的路由文件，如下所示：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './views/Home';
import NotFoundPage from './components/Errors/NotFoundPage';
//Import your Routes here
import turnoRoutes from './routes/turno';
const App = () => {
return (
<>
<Switch>
<Route path="/" component={Home} strict={true} exact={true} key="home" />
{turnoRoutes}
<Route component={NotFoundPage} key="notfound" />
</Switch>
</>
)
};
export default App;

我希望这能帮助你！请随时提出任何疑问！