私有路由未呈现关于组件

Posted 2023-02-19

【中文标题】私有路由未呈现关于组件

【英文标题】：Private Route is not rendering About Component

【发布时间】：2022-01-21 05:04:30

【问题描述】：

所以我在 App.js 中设置了私有路由。私有路由中的其他组件正确呈现。 About 组件没有渲染。在我得到一个错误之前，说一些类似于预期的字符串但得到了一个对象。现在我可以转到关于页面并且错误消失了。我 console.log 道具和幻灯片，但它没有出现在控制台中。我正在将 Private 路由中的道具（幻灯片）传递给 About.js。

Hi. Ive been stuck on this for two days now. PRivate route doesnt show the About component. It works on all other components. Code is below.Any help is greatly appreciated.

function App() 
  return (
    <div className="App">
      <Nav/>
      <main>
        <Switch>
          <PrivateRoute exact path="/home" component=Home />
          <PrivateRoute path="/resources" component=Resources />
          <PrivateRoute path = "/about" component= About slides= SliderData />
          <PrivateRoute path="/mealplan" component=MealPlan   />
        </Switch>

        <Route exact path="/" component=SignUp />
        <Route path="/login" component=Login />
      </main>
    </div>
  );


export default App;

function About(slides) 
  const [current, setCurrent] = useState(0);
  const length = slides.length


  if (!Array.isArray(slides) || slides.length <= 0) 
    return null;
  

  const nextSlide = () => 
    setCurrent(current === length - 1 ? 0 : current + 1);
  ;

  const prevSlide = () => 
    setCurrent(current === 0 ? length - 1 : current - 1);
  ;

  return (
    <>
      <section className="slider">
        <FaArrowAltCircleLeft onClick=prevSlide className="left-arrow" />
        <FaArrowAltCircleRight onClick=nextSlide className="right-arrow" />
        SliderData.map((slide, index) => 
          return (
            <div className=index === current ? "slide-active" : "active" key=index
            >
              index === current && (
                <img src=slide.image  className="dog-img" />
              )
            </div>
          );
        )
      </section>
    </>

Private Route 
const PrivateRoute = (component: Component, ...rest) =>  
    return(<Route ...rest render=
        (props) => 
            if (localStorage.getItem("token")) 
                return <Component ...props/>;
             else 
                return(<Redirect to='/login'/>);
            
        
    />);
;


Like I said it works on the other components but not the About Component. I have tried everything I can think of but cant get it to render

【参考方案1】：

问题是您试图通过PrivateRoute 将其他道具传递给组件，但不要一直传递它们。你只能通过 route 道具。

私人路线

const PrivateRoute = ( component: Component, ...rest ) =>  
  return(
    <Route
      ...rest
      render=
        (props) => 
          if (localStorage.getItem("token")) 
            return <Component ...props/>; // <-- only route props from `render`
           else 
            return(<Redirect to='/login'/>);
          
      
    />
  );
;

重构PrivateRoute，使其呈现得更像一个普通的Route 组件。

const PrivateRoute = (props) =>  
  return localStorage.getItem("token") ? (
    <Route ...props />
  ) : (
    <Redirect to='/login'/>
  );
;

现在使用render 属性渲染About 组件并传递额外的属性。

function App() 
  return (
    <div className="App">
      <Nav/>
      <main>
        <Switch>
          <PrivateRoute exact path="/home" component=Home />
          <PrivateRoute path="/resources" component=Resources />
          <PrivateRoute
            path="/about"
            render=props => (
              <About ...props slides= SliderData />
            )
          />
          <PrivateRoute path="/mealplan" component=MealPlan />
        </Switch>

        <Route exact path="/" component=SignUp />
        <Route path="/login" component=Login />
      </main>
    </div>
  );

确保您正确访问 slides 属性。 IE。 props.slides.

function About( slides ) 
  const [current, setCurrent] = useState(0);
  const length = slides.length

  if (!Array.isArray(slides) || slides.length <= 0) 
    return null;
  

  const nextSlide = () => 
    setCurrent(current === length - 1 ? 0 : current + 1);
  ;

  const prevSlide = () => 
    setCurrent(current === 0 ? length - 1 : current - 1);
  ;

  return (
    <>
      <section className="slider">
        <FaArrowAltCircleLeft onClick=prevSlide className="left-arrow" />
        <FaArrowAltCircleRight onClick=nextSlide className="right-arrow" />
        SliderData.map((slide, index) => 
          return (
            <div className=index === current ? "slide-active" : "active" key=index
            >
              index === current && (
                <img src=slide.image  className="dog-img" />
              )
            </div>
          );
        )
      </section>
    </>
  );

【讨论】：

谢谢。让我试试看。

@George 你能试一试吗？它是否解决/解决了您的问题/问题？ someone answers 时该怎么办。干杯。