issue with routing in react

Question

I am facing this routing issue where once the user hits /home ,it gets redirected to another route /home/render and things are fine . However ,if one hits home/live ,I don't see that it renders Component1 which is desired . Here is the link to the codesandbox . sandbox link

Here is my main Component index.js

import App from "./Components/App";
import Home from "./Components/Home";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
class Parent extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <Switch>
            <Route exact path="/" component={Page} />
            <Route exact path="/home" component={App} />
            <Route path="/home/render" component={Home} />
          </Switch>
        </Router>
      </div>
    );
  }
}

class Page extends React.Component {
  render() {
    return <div>Page</div>;
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

and this is my App.js

class App extends React.Component {
  render() {
    const { match } = this.props;
    console.log("match.url", match.url);
    console.log("match.path", match.path);

    return (
      <div>
        <h1>App</h1>
        <Switch>
          <Redirect from={match.url} exact to={match.url + "/render"} />;
          <Route
            path={match.path + "/live"}
            render={routeProps => (
              <Component1
                matchBaseUrl={match.url}
                {...routeProps}
                matchId={100}
              />
            )}
          />
        </Switch>
      </div>
    );
  }
}

I didn't put component.js because that's just a simple component I am rendering on screen when we hit home/live .

Answer 1

Component1 is never rendered because you set the exact prop to true on the /home route, which will make it so it only matches if the path is /home and nothing more.

You can remove the exact prop and move the route below the /home/render route so that takes precedence and it wlll work as expected.

<Switch>
  <Route exact path="/" component={Page} />
  <Route path="/home/render" component={Home} />
  <Route path="/home" component={App} />
</Switch>