Route에 조건부 렌더링 넣기

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import Main from "./pages/Main/Main";
import Rating from "./pages/Rating/Rating";
import Users from "./pages/Users/Users";
import Contents from "./pages/Contents/Contents";
import Nav from "./components/Nav/Nav";
// import Footer from "./components/Footer";
import Analysis from "./pages/Analysis/Analysis";

class Routes extends Component {
  state = {
    navHidden: false,
  }

  isNavHidden = (props) => {
    console.log(this.state.navHidden)
    this.setState({
      navHidden: props
    })
  }


  render() {
    const { navHidden } = this.state;
    const { isNavHidden } = this;
    return (
      <Router>
        {!navHidden && <Nav /> }
        <Switch>
          <Route exact path="/users/analysis" render=
          {() => <Analysis hidden={isNavHidden}  />} 
          />
          <Route exact path="/" component={Main} />
          <Route exact path="/rating" component={Rating} />
          <Route exact path="/users" component={Users} />
          <Route exact path="/contents" component={Contents} />
        </Switch>
      </Router>
    );
  }
}

export default Routes;

Route에 component 대신 render를 넣어서 화살표함수로 컴포넌트를 넣어주면 props를 줄 수 있다.

이 방식으로 state의 값에 따라 조건부 렌더링을 먹일 수 있다.