私有路由未呈现关于组件

Question

所以我在 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} alt="dog" 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

Answer 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} alt="dog" className="dog-img" />
              )}
            </div>
          );
        })}
      </section>
    </>
  );
}