React中Link组件创建正常但无法跳转至新页面的原因排查

你的代码里有两个关键问题导致点击Link后页面看似没跳转：

1. Switch外部直接渲染了<ProjectsPage/> #

不管当前路由是什么，这个组件都会被无条件渲染在页面上。当你点击Link跳转到/project/1时，Switch已经正确匹配并渲染了ProjectTasksPage，但因为ProjectsPage一直在页面中，可能会覆盖内容或者让你误以为跳转没生效。

解决：保留Switch里的<Route path="/projects" component={ProjectsPage}/>，删除Switch外面单独写的<ProjectsPage/>。

2. 路由匹配的优化建议（可选） #

虽然不是直接导致跳转失效的原因，但建议给/projects和/tasks路由加上exact属性，避免后续添加子路由时出现意外匹配问题——比如未来如果有/projects/edit这类路由，不加exact会优先匹配到/projects的路由规则。

修改后的核心代码示例：

class App extends React.Component {
    render() {
        return (
            <div className='App'>
                <BrowserRouter>
                    <Header/>
                    <br/><br/><br/>

                    <Switch>
                        <Route path="/project/:id" exact component={ProjectTasksPage}/>
                        <Route path="/" exact/>
                        <Route path="/users" exact component={UsersPage}/>
                        <Route path="/projects" exact component={ProjectsPage}/>
                        <Route path="/tasks" exact component={TasksPage}/>
                    </Switch>
                    <Link to="/project/1">Link</Link>
                    <Footer/>
                </BrowserRouter>
            </div>
        );
    }
}

修改后可以验证：点击Link后查看浏览器地址栏是否变为/project/1，同时确认页面是否渲染了ProjectTasksPage的内容。如果地址栏变化但内容没显示，需要检查ProjectTasksPage组件本身的渲染逻辑是否正确。

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