javascript - 反应中的路由问题

Question

我正面临这个路由问题，一旦用户点击 /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);

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

我没有放 component.js 因为那只是我在点击 home/live 时在屏幕上渲染的一个简单组件。

标签： javascriptreactjs

Answer 1

Component1永远不会渲染，因为您将exactprop 设置为true在/home路线上，这将使其仅在路径为时才匹配，仅此/home而已。

您可以移除exact道具并将路线移动到路线下方，/home/render以便优先并且它将按预期工作。

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