Question

我正在根据身份验证渲染组件，但是登录重定向后，仅显示导航栏，而根本不渲染组件。

App.js

return (
    <AuthContext.Provider
      value={{
        user,
        loggedIn,
        token,
        slrId,
        setLoggedIn,
        setUser,
        setToken,
        logout,
        setSlrId,
      }}
    >
      <Router>
      <MyAppBar />
       
          <Route path="/" exact component={HomeScreen} />

          <Route path="/login" exact render={() => <Auth path="login" />} />
          <Route path="/signup" exact render={() => <Auth path="signup" />} />
          {/* TODO:Add state change for customer and seller  */}
          <Route
            path="seller/login"
            exact
            render={() => <Auth path="seller/login" />}
          />

          <PrivateRoute path="seller/dashboard">
            <SellerDashBoard />
          </PrivateRoute>

        
      </Router>
    </AuthContext.Provider>
);

PrivateRoute.js

function PrivateRoute({ children, ...rest }) {
  const {loggedIn} = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={({ location }) =>
        loggedIn ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location },
            }}
          />
        )
      }
    />
  );
}

如果未登录，它甚至不会重定向到登录。

编辑：添加了仪表板文件，但我认为这不会引起任何问题。但是只是为了确保我在正常情况下对其进行了测试，所以请不要怀疑问题是它没有在任何路由方法上呈现。

SelleDashboard.js

import React from 'react;
import {Typography} from "@material-ui/core";

const SellerDashBoard=(props)=>{
  return <Typography>seller dashboard</Typography>
}
export default SellerDashboard;

Answer 1

可以给我您的github存储库吗？我什么也看不见，也没有附加您的组件代码

Answer 2

我觉得发布它真的很愚蠢，但是无论如何，该错误是由于路径引起的。原来我们需要在它们前面添加一个“ /”。以前：-

<PrivateRoute path="seller/dashboard">
            <SellerDashBoard />
          </PrivateRoute>

现在：-

<PrivateRoute path="/seller/dashboard">
            <SellerDashBoard />
          </PrivateRoute>

在ReactJS中使用路由时组件未渲染

2 个答案: