嵌套路由在单个组件的 React Router dom V4 中不起作用，仅适用于 App.js 组件

Question

我正在尝试在我的 React 应用程序中实现嵌套路由，但“Route”仅在 App.js 中使用时有效，而在另一个组件中使用“Route”时无效。仅显示空白页面。在 React Developer 工具中检查时，“匹配”对象为“空”。

我需要将一些道具从“MovieDetail”组件传递给“RTest”组件，但它不是从 MovieDetail 组件路由。剩下的唯一选择是将状态提升到 App.js。但我需要嵌套路由的解决方案。

当我在 App.js 中取消注释 'rTest' 的 'Route' 时，应用程序运行正常。请帮忙。

下面是来自应用程序的 sn-p，后面是文件。

在 App.js 中取消注释 'rTest' 的 'Route' 后，应用程序工作正常。

Route 组件被注释为“RTest 组件”时的 App.js 文件

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
 import MovieDetail from "./components/navComponents/movieDetails";
import RTest from "./components/navComponents/rTest";

class App extends Component {
  state = {
    // products: [ { id: 1, name: 'Product 1' }, { id: 2, name: 'Product 2' }, { id: 3, name: 'Product 3' } ]
  card: [],
        pageSize: 6,
        currentPage: 1,
        cartItems: []
};

render() {
    return (
      <div>
        <Navigation></Navigation>
       
        <div className="content">
          <Switch>
           
            <Route path="/catalouge" render={(props)=>
              <Catalouge 
              pageSize={this.state.pageSize} 
              {...props}
              catImages={this.state.card}
              onAddApp={this.handleAdd}
              onSubApp={this.handleSub}
              onCartAddApp={this.handleCartAdd}
              >
              </Catalouge>}>

              </Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/toCart" 
            render={(props)=>
            <ShoppingCart cartItems={this.state.cartItems} {...props}></ShoppingCart>} />
            <Route path="/posts" component={Posts}></Route>
            <Route path="/customers" component={Customers}></Route>
            <Route path="/movies" component={Movies}></Route>
            <Route path="/movie/details" exact component={(props) => <MovieDetail {...props} />} />
            {/* <Route path="/rTest" component={RTest} /> */}
          </Switch>
        </div>
      </div>
    );
  }
}

export default App;

MovieDetail 组件如下：

   
import React, { Component } from 'react';
import { Link, Route } from 'react-router-dom';
import RTest from './rTest';

const MovieDetail = ({ match }) => {
    return (
        <React.Fragment>
            <h1>Hello MovieDetial</h1>
            <ul>
                <li>
                    <Link to="/rTest">rTest</Link>
                </li>
            </ul>
            <Route path="/rTest" component={RTest} />
        </React.Fragment>
    );
};

export default MovieDetail;

import React, { Component } from 'react';

const RTest = (props) => {
    return <h1>Hello RTest</h1>;
};

export default RTest;

package.json file is below

{ “名称”：“路由器应用程序”， “版本”：“0.1.0”， “私人”：真的， “依赖”：{ "@fortawesome/react-fontawesome": "^0.1.16", "axios": "^0.18.1", “引导程序”：“^4.1.1”， "字体真棒": "^4.7.0", "joi-browser": "^13.4.0", “反应”：“^16.4.1”， “反应域”：“^16.14.0”， "react-router-dom": "^4.3.1", “反应脚本”：“1.1.4”， “反应带”：“^9.0.1” }, “脚本”：{ “开始”：“反应脚本开始”， "build": "react-scripts build", "test": "react-scripts 测试 --env=jsdom", “弹出”：“反应脚本弹出” } }

================================================ ==

Answer 1

请 App.js 文件。

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
 import MovieDetail from "./components/navComponents/movieDetails";
import RTest from "./components/navComponents/rTest";

class App extends Component {
  state = {
    // products: [ { id: 1, name: 'Product 1' }, { id: 2, name: 'Product 2' }, { id: 3, name: 'Product 3' } ]
  card: [],
        pageSize: 6,
        currentPage: 1,
        cartItems: []
};

render() {
    return (
      <div>
        <Navigation></Navigation>
       
        <div className="content">
          <Switch>
           
            <Route path="/catalouge" render={(props)=>
              <Catalouge 
              pageSize={this.state.pageSize} 
              {...props}
              catImages={this.state.card}
              onAddApp={this.handleAdd}
              onCartAddApp={this.handleCartAdd}
              >
              </Catalouge>}>

              </Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/toCart" 
            render={(props)=>
            <ShoppingCart cartItems={this.state.cartItems} {...props}></ShoppingCart>} />
            <Route path="/posts" component={Posts}></Route>
            <Route path="/customers" component={Customers}></Route>
            <Route path="/movies" component={Movies}></Route>
            <Route path="/movie/details" exact component={(props) => <MovieDetail {...props} />} />
            {/* <Route path="/rTest" component={RTest} /> */}
          </Switch>
        </div>
      </div>
    );
  }
}

export default App;