[Solved]-How can I use React Router to change routes from within a component that is also Routed in the Main App.js component?-Reactjs

Or you can do it like this. Wrap all sub-components(SignIn or SignUp...) to Wrapper.

and In your Wrapper, add {this.props.child}

I prefer this way because I can manage routes in one place.

App

import React from "react";
import Wrapper from "./wrapper";
import Dashboard from "./Dashboard";
import "./App.css";
import { Route, Switch } from "react-router-dom";


function App() {
  return (     
      <Switch>
          <Route exact path="/" component={Wrapper} />
          <Route exact path="/dashboard" component={Dashboard} />
          // Add these routes to App
          <Route exact path='/signin' component={Signin} />
          <Route exact path="/register" component={Register} />
      </Switch>

  );
}

export default App;

Wrapper

import React from "react";
import Navbar from "./Nav";
import Signin from "./Signin";
import Info from "./Info";
import Register from "./Register";
import { Switch, Route } from "react-router-dom";

const Wrapper = () => {
  return (
    <div className="wrapper">
      <Navbar nav={"Home"} navv={"Sign in"} navvv={"Register"} />
      <div className="home-body pa5">
        <Info />
        {...this.props.child} // Replace from <Switch> to this
      </div>
    </div>
  );
};

export default Wrapper;

Login or Signin component

import React from "react";
import { Link,withRouter } from "react-router-dom";
import Wrapper from "./Wrapper";

const Info = () => {
  return (
    <Wrapper> // Add this 
        <div className="bg-white-60 br3">
          <p className="f1 center pa3 orange sans-serif">
            Sick? Skip the clinic queue! <br />
            Register now to book an appointment
          </p>
          <div className="ph3">
            <Link
              className="f6 link dim ba ph3 pv2 mb2 dib orange bg-near-white mr4"
              to="/signin"
            >
              Sign in
            </Link>
            <Link
              className="f6 link dim ba ph3 pv2 mb2 dib orange bg-near-white mr4"
              to="/register"
            >
              Register
            </Link>
          </div>
        </div>
    </Wrapper>
  );
};

export default withRouter(Info);

As Vlad says, first you need to remove the exact from /, but also move it down, after the /dashboard route, so if the URL is exactly /dashboard will match with the Dashboard component, otherwise will match with the Wrapper component. This should work:

function App() {
  return (     
      <Switch>
          <Route exact path="/dashboard" component={Dashboard} />
          <Route path="/" component={Wrapper} />
      </Switch>

  );
}

Remove exact from <Route exact path="/" component={Wrapper} /> and move it to the bottom of Switch