Question

我正面临这个路由问题，一旦用户点击/ home，它将重定向到另一条路由/ home / render，一切都很好。但是，如果有人在家或现场演出，我看不到它会呈现所需的Component1。这是codesandbox的链接。 sandbox link

这是我的主要组件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时在屏幕上渲染的一个简单组件。

Answer 1

Component1永远不会呈现，因为您在exact路线上将true道具设置为/home，这使得它仅在路径为{{ 1}}，仅此而已。

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

/home/render

反应中的路由问题

1 个答案: