Javascript react中的路由问题

我面临这个路由问题，一旦用户点击/home，它就会被重定向到另一个路由/home/render，一切正常。 但是，如果点击home/live，我看不出它会呈现所需的Component1。 这里是代码沙盒的链接。

这是我的主要组件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);

从“/Components/App”导入应用程序；
从“/Components/Home”导入主页；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
类父类扩展了React.Component{
render（）{
返回(
);
}
}
类页扩展了React.Component{
render（）{
返回页面；
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

这是我的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>
    );
  }
}

类应用程序扩展了React.Component{
render（）{
const{match}=this.props；
log（“match.url”，match.url）；
log（“match.path”，match.path）；
返回(
应用程序
;
(
)}
/>
);
}
}

---

我没有放置component.js，因为当我们点击home/live时，这只是我在屏幕上呈现的一个简单组件。

Component1

从未呈现，因为您在

/home

路线上将

精确的
属性设置为
真的
，这将使其仅在路径为
/home
且仅此而已时匹配

您可以删除
exact
道具，并将路线移动到
/home/render
路线下方，使其具有优先权，并按预期工作

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