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;

'我什至尝试将第二条路线称为普通路线（不带Param路线）。没有运气'

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;

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

2 个答案: