React and responsiveness

Hi !

I need some help to resolve a problem I am facing with React.
I am creating my portofolio and I’m trying to make it responsive so I m going mobile first to make my media queries.
My problem is about rendering component from different location.
I have a navigation using react router, so the first thing display is my home page only and I need, for example, to click projects to show projects.
My goal is to show every component for small devices like a single scrolling page.
How do I show components that have different path ?

I’m not sure if I understand the problem precisely, but you handle responsiveness in React the same way you do with regular HTML, because ultimately React is just rendering HTML for you. So you can either hand roll your own responsiveness with things like CSS media queries and conditionally hidden elements, or lean on a CSS framework like Material or Bootstrap and use their varied classes for responsiveness.

Thanks for the answer.

Let me try again.
For small devices I want to make it a one page that you scroll. You’ll have : Home, Projects, Contact… one under the other.
Then on bigger device I want my navigation bar to be display and also the content from one section only.

Right now on small device I only show one section because of the routes I use.
How could I change that ?

I already have this :

App.js
.............................
render() {
    return (
      <div className="main">
        <Navigation />
        <Main />
      </div>
    );
  }
...............................
Main.js
...............................
render() {
    return (
    <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/projects' component={Projects}/>
        <Route path='/contact' component={Contact}/>
    </Switch>
    )
  }
................................
Navigation.js
................................
render() {
    return (
      <div className="navigation">
        <ul className="navigation-list">
            <li className="navigation-link"><Link to='/'>Home</Link></li>
            <li className="navigation-link"><Link to='/projects'>Projects</Link></li>
            <li className="navigation-link"><Link to='/contact'>Contact</Link></li>
        </ul>
      </div>
    )
  }