Блог

Я сталкиваюсь с этой проблемой маршрутизации, когда после того, как пользователь нажимает / home, он перенаправляется на другой маршрут / home / render, и все в порядке. Однако, если кто-то нажмет home / live , я не вижу, чтобы он отображал Component1, который является желаемым. Вот ссылка на codesandbox . ссылка на песочницу

Вот мой основной компонент 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 .

Component1 никогда не отображается, потому что вы устанавливаете для exact prop значение true на /home маршруте, что сделает его таким, чтобы он совпадал только в том случае, если путь /home и ничего более.

Вы можете удалить exact реквизит и переместить маршрут ниже /home/render маршрута, чтобы он имел приоритет, и он будет работать так, как ожидалось.

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