使用React Router实现列表跳转详情页及导航栏返回首页问题咨询

问题根因 #

你现在的列表和详情同时展示，是因为<PokemonList>组件放在了路由匹配规则<Switch>的外部，不管路由如何变化，列表组件都会全局渲染。

分步修改代码 #

1. 修改app.js路由结构 #

把首页列表放到根路径的专属路由中，用exact严格匹配根路径，确保只有访问首页时才渲染列表，访问详情页时只渲染详情组件：

return (
    <div className="main-bg">
        <div className='container'>
            <div>
                <Navbar/>
            </div>
            <div className='row'>                        
                <Switch>        
                    {/* 仅匹配根路径时渲染列表 */}
                    <Route exact path="/">
                        <PokemonList
                            pokemons={pokemons}
                            handleFavouritesClick={addFavouritePokemon}
                            favouriteComponent={AddFavourites}
                        />
                    </Route>
                    <Route path="/pokemon/:id" component={PokemonDetail} /> 
                </Switch>   
            </div>       
        </div>
    </div>
);

2. 修正列表跳转路径 #

把跳转路径改成绝对路径，避免相对路径在嵌套路由场景下匹配错误：

<StyledLink to={`/pokemon/${pokemon.id}`}>
    <Card>
        <div className="w-100 p-2 rounded text-center card-outer">
            <h5 className="card-header">{pokemon.id}</h5> 
            {/* 其余原有代码保持不变 */}
        </div>
    </Card> 
</StyledLink>

3. 实现导航栏logo返回首页 #

在Navbar组件中导入react-router-dom的Link组件，把logo元素用Link包裹，指向根路径即可：

// 先在Navbar组件顶部导入依赖
import { Link } from 'react-router-dom';

// 替换原有logo渲染逻辑
<Link to="/">
    {/* 这里放你的logo元素代码，比如img标签、文字logo等 */}
    <img src="logo资源路径" alt="站点logo" />
</Link>

4. 补充详情页参数获取逻辑 #

你当前详情页的pokemons变量没有绑定对应数据，需要从路由参数中拿到宝可梦ID后请求对应详情再渲染：

// 详情页顶部导入依赖
import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

const PokemonDetail = () => {
    // 从路由参数中获取宝可梦ID
    const { id } = useParams();
    const [currentPokemon, setCurrentPokemon] = useState(null);
    // 调用你的接口获取单个宝可梦详情数据
    useEffect(() => {
        fetch(`你的API基础地址/${id}`)
            .then(res => res.json())
            .then(data => setCurrentPokemon(data))
    }, [id])

    if(!currentPokemon) return <div>加载中...</div>
    return (
        <div className="col-md-3 my-5">
            <div className="card-outer w-100 p-2 rounded text-center">
                <h5 className="card-header">{currentPokemon.name}</h5> 
                {/* 按需渲染其余详情字段 */}
            </div>                      
        </div>              
    )
}

内容的提问来源于stack exchange，提问作者Yasmins