为什么只有我的第一个路由器渲染组件？ 第二个路由器没有渲染

Question

'当我访问“/shop/hats”时，它只显示空白页。 我看不到任何错误。 但是当我将类别组件放在第一条路线中时，它就起作用了。

'商店组件'

import React from "react";

import CollectionPreview from "../../component/CollectionPreview/collectionPreview-com"
import {Route} from "react-router-dom"
import Category from "../../component/Category/category-com"


const Shop = ({match}) =>  {
    console.log("Printing" + match.path);
    
    return(
        <div>
           <Route exact path="/shop" component={CollectionPreview} /> 
           <Route path="/shop/:categoryId" component={Category} />
        </div>
            
        )
    }

export default Shop;

'未呈现的类别组件。 但是当我在第一条路线中使用这个组件时，它可以工作'

import React from "react";
import "./category-style.css";

const Category = ({match}) => {
    console.log(match);
    
    return(
        <div className="Test">
            <h1>Test</h1>
        </div>
    )
}

export default Category;

'我什至尝试将第二条路线称为正常路线（没有参数路线）。 没运气'

Answer 1

尝试这个：

import { Switch, Route } from 'react-router-dom';

//your code

return (
   <Switch>
       <Route exact path="/shop" component={CollectionPreview} /> 
       <Route path="/shop/:categoryId" component={Category} />
   </Switch>
);

有关何时使用Switch的更多详细信息，请参阅： here

Answer 2

您可以尝试使用useParams()挂钩。 像下面

import React from "react";
import { useParams } from 'react-router-dom';
import "./category-style.css";

const Category = () => {
const {categoryId} = useParams();
    return(
        <div className="Test">
            <h1>Test</h1>
        </div>
    )
}
export default Category;