Javascript React Router Redirect不会呈现组件
这是我的App.js：Javascript React Router Redirect不会呈现组件,javascript,reactjs,react-router,react-router-dom,Javascript,Reactjs,React Router,React Router Dom,这是我的App.js： function App() { return ( <BrowserRouter> <AuthProvider> <Switch> <PrivateRoute path="/" component={MainPage} /> <PrivateRoute path="/admin" component=
function App() {
return (
<BrowserRouter>
<AuthProvider>
<Switch>
<PrivateRoute path="/" component={MainPage} />
<PrivateRoute path="/admin" component={MainPage} />
<Container
className="d-flex align-items-center justify-content-center"
style={{ minHeight: "100vh" }}
>
<div className="w-100" style={{ maxWidth: "400px" }}>
<Route path="/signup" component={Signup} />
<Route path="/login" component={Login} /> //The component part
<Route path="/forgot-password" component={ForgotPassword} />
</div>
</Container>
</Switch>
</AuthProvider>
</BrowserRouter>
);
}
函数应用程序（）{
返回(
//组成部分
);
}
export default function PrivateRoute({ component: Component, ...rest }) {
const { currentUser } = useAuth();
return (
<Route
render={(props) => {
return currentUser ? <Admin {...props} /> : <Redirect to="/login" />; // it redirects when the user does not log in.
}}
></Route>
);
导出默认函数PrivateRoute（{component:component，…rest}）{
const{currentUser}=useAuth（）；
返回(
{
return currentUser？：；//当用户不登录时，它会重定向。
}}
>
);
export default function Login() {
const emailRef = useRef();
const passwordRef = useRef();
const { login, currentUser } = useAuth();
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const history = useHistory();
if (currentUser) {
history.push("/admin/mainpage");
}
async function handleSubmit(e) {
e.preventDefault();
try {
setError("");
setLoading(true);
await login(
emailRef.current.value + "@myosmail.com",
passwordRef.current.value
);
history.push("/admin/mainpage");
} catch {
setError("Failed to log in");
}
setLoading(false);
}
return (
<>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Log In</h2>
{error && <Alert variant="danger">{error}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group id="email">
<Form.Label>Username</Form.Label>
<Form.Control ref={emailRef} required />
</Form.Group>
<Form.Group id="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password" ref={passwordRef} required />
</Form.Group>
<Button disabled={loading} className="w-100" type="submit">
Log In
</Button>
</Form>
<div className="w-100 text-center mt-3">
<Link to="/forgot-password">Forgot Password?</Link>
</div>
</Card.Body>
</Card>
<div className="w-100 text-center mt-2">
Need an account? <Link to="/signup">Sign Up</Link>
</div>
</>
);
}
导出默认函数登录（）{
const emailRef=useRef（）；
const passwordRef=useRef（）；
const{login，currentUser}=useAuth（）；
const[error，setError]=useState（“”）；
const[loading，setLoading]=useState（false）；
const history=useHistory（）；
如果（当前用户）{
history.push（“/admin/mainpage”）；
}
异步函数handleSubmit（e）{
e、 预防默认值（）；
试一试{
设置错误（“”）；
设置加载（真）；
等待登录(
emailRef.current.value+“@myosmail.com”，
passwordRef.current.value
);
history.push（“/admin/mainpage”）；
}抓住{
setError（“登录失败”）；
}
设置加载（假）；
}
返回(
登录
{error&&{error}
用户名
密码
登录
忘记密码了？
需要账户吗？注册吧
);
}
我想建立一个组件，如果用户没有登录，它不能访问我的网站的内容，所以我建立上述组件。但问题是，当我打开我的页面并且没有登录页面时，将我重定向到“/login”，但是登录组件没有呈现，我不明白问题出在哪里。我调试了我的组件，我看到我的代码首先进入PrivateRoute组件，然后它重定向到“/login”，但当页面重定向到login时，没有呈现任何内容。当我从App.js中删除PrivateRoutes时，我的代码工作正常。您没有在
ProtectedRoute路由的路径
<Route
{...rest} // spread the test here
render={(props) => {
return currentUser ? <Admin {...props} /> : <Redirect to="/login" />; // it redirects when the user does not log in.
}}
></Route>
{
return currentUser？：；//当用户不登录时，它会重定向。
}}
>
还可以切换@Drew Reese提到的路径。您没有将路径传递到受保护路径中的路径
<Route
{...rest} // spread the test here
render={(props) => {
return currentUser ? <Admin {...props} /> : <Redirect to="/login" />; // it redirects when the user does not log in.
}}
></Route>
{
return currentUser？：；//当用户不登录时，它会重定向。
}}
>
另外，如@Drew Reese所述，切换路径的路径。Issue
我猜您已经在开关
组件中首先放置了一个“/”路径：
<PrivateRoute path="/" component={MainPage} />
在开关中
组件路径顺序和特定性很重要，您希望在不太特定的路径之前，对更特定的路径进行排序。“/”是所有路径的路径前缀，因此您希望它位于其他路径之后。嵌套路由也需要在开关中呈现，因此只返回和呈现单个匹配
<BrowserRouter>
<AuthProvider>
<Switch>
<Container
className="d-flex align-items-center justify-content-center"
style={{ minHeight: "100vh" }}
>
<div className="w-100" style={{ maxWidth: "400px" }}>
<Switch>
<Route path="/signup" component={Signup} />
<Route path="/login" component={Login} /> //The component part
<Route path="/forgot-password" component={ForgotPassword} />
</Switch>
</div>
</Container>
<PrivateRoute path={["/admin", "/"]} component={MainPage} />
</Switch>
</AuthProvider>
</BrowserRouter>
这允许您使用所有正常的路由
组件道具，而不仅仅限于使用组件
道具
用途：
-
-
}/>
-
问题
我猜您已经在开关
组件中首先放置了一个“/”路径：
<PrivateRoute path="/" component={MainPage} />
在开关中
组件路径顺序和特定性很重要，您希望在不太特定的路径之前，对更特定的路径进行排序。“/”是所有路径的路径前缀，因此您希望它位于其他路径之后。嵌套路由也需要在开关中呈现，因此只返回和呈现单个匹配
<BrowserRouter>
<AuthProvider>
<Switch>
<Container
className="d-flex align-items-center justify-content-center"
style={{ minHeight: "100vh" }}
>
<div className="w-100" style={{ maxWidth: "400px" }}>
<Switch>
<Route path="/signup" component={Signup} />
<Route path="/login" component={Login} /> //The component part
<Route path="/forgot-password" component={ForgotPassword} />
</Switch>
</div>
</Container>
<PrivateRoute path={["/admin", "/"]} component={MainPage} />
</Switch>
</AuthProvider>
</BrowserRouter>
这允许您使用所有正常的路由
组件道具，而不仅仅限于使用组件
道具
用途：
-
-
}/>
-
我也有过同样的问题。这解决了我的问题。用开关把你的三条路线包起来
<Switch>
<Route path="/signup" component={Signup} />
<Route path="/login" component={Login} />
<Route path="/forgot-password" component={ForgotPassword} />
</Switch>
由于第一个专用路由具有根路径，因此它将始终指向该路由。您可以将exact用于第一条专用路线。但最好的方法应该是放置第一条私人路线
<PrivateRoute path={["/admin", "/"]} component={MainPage} />
在底部。所以当没有比赛时，它只会去那里。我也有过同样的问题。这解决了我的问题。用开关把你的三条路线包起来
<Switch>
<Route path="/signup" component={Signup} />
<Route path="/login" component={Login} />
<Route path="/forgot-password" component={ForgotPassword} />
</Switch>
由于第一个专用路由具有根路径，因此它将始终指向该路由。您可以将exact用于第一条专用路线。但最好的方法应该是放置第一条私人路线
<PrivateRoute path={["/admin", "/"]} component={MainPage} />
在底部。因此，当没有比赛时，它只去那里