react-router 的未安装组件

Question

I have a problem with my react router when I want to pass from a router to another. I have a Connexion files:

import React from "react";
import {
  Switch,
  BrowserRouter as Router,
  Route,
  Redirect,
} from "react-router-dom";
import SignIn from "./Containers/Login/Login";
import Player from "./Player";

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={SignIn} />
        <Route path="/app/player/" component={Player} />
        <Route path="/*">
          <Redirect to="/" />
        </Route>
      </Switch>
    </Router>
  );
};

export default Routes;

When I connect from "SignIn", I want to go in the next route "Player":

import React from "react";
import {
  Switch,
  BrowserRouter as Router,
  Route,
  useRouteMatch,
} from "react-router-dom";
import Navigation from "./Navigation/PlayerNavigation";

import FillCollect from "./Containers/Collect/Collect";
import Dashboard from "./Containers/Dashboard/Dashboard";

const Player = () => {
  const { path } = useRouteMatch();
  console.log(path);
  return (
    <Router>
      <Navigation />
      <Switch>
        <Route path={`${path}/collect/:id`} component={FillCollect} />
      </Switch>
    </Router>
  );
};

export default Player;

(My Navigation component is my sidebar and topbar)

But when I'm connect my Navigation is displayed but not my Fill Collect: And i have this warning :

Warning: Can't perform a React state update on a unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect clean function. In SignIn (created by Context.Consumer)

I tried to display a minimalist component with just div but it's the same

Answer 1

There are a couple of problems in this

• Firstly you are using a nested Router component too, which then restricts the inner Routes from listening to the router Router component
• Secondly, your matchPath in parent is "/app/player/" which if you combine with the nested Route in child like ${path}/collect/:id . It becomes "/app/player//collect/:id" which is not what you indent

The working solution will be as follows

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={SignIn} />
        <Route path="/app/player" component={Player} />
        <Route path="/*">
          <Redirect to="/" />
        </Route>
      </Switch>
    </Router>
  );
};

export default Routes;

---

const Player = () => {
  const { path } = useRouteMatch();
  console.log(path);
  return (
    <React.Fragment>
      <Navigation />
      <Switch>
        <Route path={`${path}/collect/:id`} component={FillCollect} />
      </Switch>
     </React.Fragment>
  );
};

export default Player;