How to do both inclusive and exclusive routing? - reactjs

Question

I need to be able to display the component on the home path "/" while I have "/signIn" modal up. However, after my user is signed in, I would like to replace the "/" component with the "/internal" component. I know how to use to render components exclusively, but I need a solution where I am rendering both inclusively and exclusively. My signIn modal must appear above the "/" component, and after the user is signed in I need the "/" component to be switched with the "/internal" component. I am only being able to do one or the other, is there a way to use both inclusive and exclusive routing in React-Router 4? Thank you.
What I tried:
<Route path="/" component={ExternalContainer} />
<Route path="/signIn" component={SignInModal} />
<Switch>
<Route path="/" component={ExternalContainer} />
<Route path="/internal" component={InternalContainer} />
</Switch>
What I have now but does not work:
<Route path="/" component={ExternalContainer} />
<Route path="/signIn" component={SignInModal} />
<Route path="/internal" component={InternalContainer} />

Answer 1

I think you are overcomplicating your routing structure. In theory, if you want to use a modal for your SignInModal component, then it does not need its own Route. You can just toggle its display within your ExternalContainer component. Then upon filling out the form and clicking the submit button in your SignInModal, just redirect to the InternalContainer.
See a very basic integration like this: https://codesandbox.io/s/old-snowflake-djbc3
Working code:
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
import ExternalContainer from "./ExternalContainer";
import InternalContainer from "./InternalContainer";
import "./styles.css";
function App() {
return (
<BrowserRouter>
<Route path="/" component={ExternalContainer} exact />
<Route path="/internal" component={InternalContainer} />
</BrowserRouter>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
ExternalContainer.js
import React from "react";
import SignInModal from "./SignInModal";
class ExternalContainer extends React.Component {
state = {
modalOpen: false
};
toggleModal = () => {
this.setState({
modalOpen: !this.state.modalOpen
});
};
render() {
return (
<div>
<h4>Welcome to the App</h4>
<button onClick={this.toggleModal}>Sign In</button>
<SignInModal
open={this.state.modalOpen}
toggleModal={this.toggleModal}
/>
</div>
);
}
}
export default ExternalContainer;
SignInModal.js
import React from "react";
import Modal from "react-modal";
import { withRouter } from "react-router-dom";
class SignInModal extends React.Component {
state = {
username: "",
password: ""
};
handleOnChange = e => {
this.setState({
[e.target.name]: e.target.value
});
};
handleOnSubmit = e => {
e.preventDefault();
const { username, password } = this.state;
if (username && password) {
this.props.history.push("/internal");
}
};
render() {
return (
<Modal
isOpen={this.props.open}
onRequestClose={this.props.toggleModal}
style={{
overlay: {
background: "rgba(0, 0, 0, 0.3)"
},
content: {
background: "white",
top: "45%",
left: "50%",
right: "auto",
bottom: "auto",
transform: "translate(-50%,-50%)",
width: "200px",
textAlign: "center"
}
}}
ariaHideApp={false}
>
<form onSubmit={this.handleOnSubmit}>
<div>
<label>Name</label>{" "}
<input name="username" onChange={this.handleOnChange} />
</div>
<div>
<label>Password</label>{" "}
<input name="password" onChange={this.handleOnChange} />
</div>
<button type="submit">Sign In</button>
</form>
</Modal>
);
}
}
export default withRouter(SignInModal);
InternalContainer.js
import React from "react";
const InternalContainer = () => {
return (
<div>
<h4>You have reached the internal container</h4>
</div>
);
};
export default InternalContainer;