React Router Load Any of One Component in else

Question

I have created a react app with protected route. Now App is on stage where I can not any strong change in it . The Thing is In my App.js component i have a condition

<div className="App">
      {
        (props.auth) ? <MainView /> : <Signin /> 
      }
</div>

MainView component has all the routes written in it. And props.auth is redux state. This is working fine without any challenge. But now I want to use SignUp component which renders when or if user want to create-account. But I mentioned My route is written in MainView component. So if I fill singup route I only see <SignIn> component because of the else condition in app.js. How can i Call <SignUp> component without changing more structure or in easier way.

To be more specific

<div className="App">
    {
      (props.auth) ? <MainView /> : <Signin /> || <SignUp /> //I want to render both of them if user not logged in. And they both are seperate component.
    }
</div>

Answer 1

You can put the two components in a div or use a React Fragment.

<div className="App">
    {
      (props.auth) ? <MainView /> : <> <Signin /> <SignUp /> </> // Using a React fragment
    }
</div>

<div className="App">
    {
      (props.auth) ? <MainView /> : <div> <Signin /> <SignUp /> </div> // Using a div
    }
</div>

Update:

<div className="App">
    {
      (props.auth) ? <MainView /> : <>
          flag ? <Signin /> : <SignUp />
      </> // The flag must change values depending on what the user chooses to see; Its default value may be for SignIn
    }
</div>

Answer 2

You can either extract those to components into a new component like Login page and render this in the else.

Or wrap the compoennts into a fragment:

<div className="App">
    {
      (props.auth) ? <MainView /> : 
<>
<Signin />
<SignUp />
</>
    }
</div>