只有一条子路线显示在反应中？显示不同路线的组件而不是它自己的

Question

当用户转到 url 查找“/films/:title”时，它会显示 MovieDetailContainer，它是其上方路径的组件，但不显示其自己的组件。当我翻转 urls 的顺序时，就会发生相反的情况。为什么是这样？我认为这是一个嵌套错误，但我似乎无法弄清楚。

这里是路线的代码，完整的代码 App/js 在下面只是 incase。

  <div className="container mt-3">
        <Switch>
          <Route exact path={["/", "/home"]} component={Home} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />
          <Route exact path="/profile" component={Profile} />
          **<Route exact path="/films/:id" children={<MovieDetailContainer/>}/>
          <Route exact path="/films/:title" children={<MovieListComponent/>}/>**
          <Route path="/user" component={BoardUser} />
          <Route path="/creator" component={BoardCreator} />
          <Route path="/admin" component={BoardAdmin} />
        </Switch>
      </div>

import "bootstrap/dist/css/bootstrap.min.css";
import React, { useEffect, useState } from "react";
import { Link, Route, Switch } from "react-router-dom";
import styled from "styled-components";
import { useLocation } from 'react-router-dom';
// components
import Search from './components/search/Search'
import "./App.css";
// import AuthVerify from "./common/auth-verify";
import EventBus from "./common/EventBus";
import BoardAdmin from "./components/board-admin.component";
import BoardCreator from "./components/board-creator.component";
import BoardUser from "./components/board-user.component";
import Home from "./components/home.component";
import Login from "./components/login.component";
import MovieListComponent from "./components/films/movie-list.component";
import Profile from "./components/profile.component";
import Register from "./components/register.component";
import AuthService from "./services/auth.service";
import MovieInfoComponent from "./components/films/movie-info.component";
import MovieItem from "./components/films/movie-item.component";
import MovieDetailContainer from "./components/films/movie-detail-container.component"


const MovieListContainer = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 30px;
  gap: 25px;
  justify-content: space-evenly; ;
`;

const App = () => {
  const [showCreatorBoard, setShowCreatorBoard] = useState(false);
  const [showAdminBoard, setShowAdminBoard] = useState(false);
  const [currentUser, setCurrentUser] = useState(undefined);
  const [locationState, setLocationState] = useState('')

  const location = useLocation();


  useEffect(() => {
    const user = AuthService.getCurrentUser();
    setLocationState(location.pathname)
    if (user) {
      setCurrentUser(user);
      setShowAdminBoard(user.roles.includes("ROLE_MODERATOR"));
      setShowAdminBoard(user.roles.includes("ROLE_ADMIN"));
    }

    EventBus.on("logout", () => {
      this.logOut();
    });

    return () => {
      EventBus.remove("logout");
    };
  }, []);
  const logOut = () => {
    AuthService.logout();
    setShowCreatorBoard(false);
    setShowAdminBoard(false);
    setCurrentUser(undefined);
  };

  return (
    <div>
      <nav className="navbar navbar-expand navbar-dark bg-dark">
        <Link to={"/"} className="navbar-brand">
          Movie App
        </Link>
        <div className="navbar-nav mr-auto">
          <li className="nav-item">
            <Link to={"/home"} className="nav-link">
              Home
            </Link>
          </li>

          {showCreatorBoard && (
            <li className="nav-item">
              <Link to={"/mod"} className="nav-link">
                Moderator Board
              </Link>
            </li>
          )}

          {showAdminBoard && (
            <li className="nav-item">
              <Link to={"/admin"} className="nav-link">
                Admin Board
              </Link>
            </li>
          )}

          {currentUser && (
            <li className="nav-item">
              <Link to={"/user"} className="nav-link">
                User
              </Link>
            </li>
          )}
        </div>

        {/* passing a callback function to the Search component which will return
        the result returned from the api. Keeping the movie list state in app.js to map the movies here */}

        {locationState=='/register'||locationState=='/login'?null:<Search/>}


        {currentUser ? (
          <div className="navbar-nav ml-auto">
            <li className="nav-item">
              <Link to={"/profile"} className="nav-link">
                {currentUser.username}
              </Link>
            </li>
            <li className="nav-item">
              <a href="/login" className="nav-link" onClick={logOut}>
                LogOut
              </a>
            </li>
          </div>
        ) : (
          <div className="navbar-nav ml-auto">
            <li className="nav-item">
              <Link to={"/login"} className="nav-link">
                Login
              </Link>
            </li>

            <li className="nav-item">
              <Link to={"/register"} className="nav-link">
                Sign Up
              </Link>
            </li>
          </div>
        )}
      </nav>

      <div className="container mt-3">
        <Switch>
          <Route exact path={["/", "/home"]} component={Home} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />
          <Route exact path="/profile" component={Profile} />
          <Route exact path="/films/:id" children={<MovieDetailContainer/>}/>
          <Route exact path="/films/:title" children={<MovieListComponent/>}/>
          <Route path="/user" component={BoardUser} />
          <Route path="/creator" component={BoardCreator} />
          <Route path="/admin" component={BoardAdmin} />
        </Switch>
      </div>
      {/* {selectedMovie && <MovieInfoComponent selectedMovie={selectedMovie} />} */}

      {/*<AuthVerify logOut={this.logOut}/> */}
    </div>
  );
};


export default App;

Answer 1

"/films/:id"和"/films/:title"两条路径具有相同的特异性，所以第一个渲染的将是Switch组件匹配渲染的那个。

要解决你需要添加一些东西来区分它们。我建议区分 sub-path.

示例：

<div className="container mt-3">
  <Switch>
    <Route path="/login" component={Login} />
    <Route path="/register" component={Register} />
    <Route path="/profile" component={Profile} />
    <Route path="/films/:title/:id" component={MovieDetailContainer}/>
    <Route path="/films/:title" component={MovieListComponent}/>
    <Route path="/user" component={BoardUser} />
    <Route path="/creator" component={BoardCreator} />
    <Route path="/admin" component={BoardAdmin} />
    <Route path={["/", "/home"]} component={Home} />
  </Switch>
</div>

只有一条子路线显示在反应中？显示不同路线的组件而不是它自己的

only one child route displaying in react? displays component for a different route instead of its own

javascript

frontend

reactjs

react-router

react-router-dom