React 路由动画导致 URL 不匹配

问题描述

使用 React Transition Group 为路由设置动画时，当前路由路径不匹配。

根组件代码示例：

const routes = [
    { path: '/users/:userId',Component: UserPage },{ path: '/posts/:postId',Component: SinglePostPage },{ path: '/editPost/:postId',Component: EditPostForm },{ path: '/users',Component: UsersList },{ path: '/notifications',Component: NotificationsList },{ path: '/',Component: FeaturesHome },]

function App() {
    return (
        <Router>
            <Navbar />
            <div className="App">
                {
                    routes.map(route => (
                        <Route exact key={ route.path } path={ route.path } children={ routeProps => (
                            <Csstransition in={ routeProps.match !== null } timeout={ 300 } classNames="page" unmountOnExit>
                                <div className="page">
                                    <route.Component { ...routeProps } />
                                </div>
                            </Csstransition>
                        )} />
                    ))
                }
                <Switch>
                    {/* <Route exact path="/" render={ () => <FeaturesHome /> } />
                    <Route exact path="/posts/:postId" component={ SinglePostPage } />
                    <Route exact path="/editPost/:postId" component={ EditPostForm } />
                    <Route exact path="/users" component={ UsersList } />
                    <Route exact path="/users/:userId" component={ UserPage } />
                    <Route exact path="/notifications" component={ NotificationsList } /> */}
                    <ModalSwitch />
                    <Redirect to="/" />
                </Switch>
            </div>
        </Router>
    )
}

动态路由组件示例：

SinglePostPage.js

import React from 'react'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'

import { PostAuthor } from './PostAuthor'
import { TimeAgo } from './TimeAgo'
import { ReactionButtons } from './ReactionButtons'
import { selectPostById } from './postsSlice'

export const SinglePostPage = ({ match }) => {
    const { postId } = match.params
    const post = useSelector(state => selectPostById(state,postId))
    if (!post) 
        return (
            <section>
                <h2>Post not found!</h2>
            </section>
        )
    return (
        <section>
            <article className="post">
                <h2>{ post.title }</h2>
                <div>
                    <PostAuthor userId={ post.user } />
                    <TimeAgo timestamp={ post.date } />
                </div>
                <p className="post-content">{ post.content }</p>
                <ReactionButtons post={ post } />
                <Link to={ `/editPost/${ post.id }` } className="button">Edit Post</Link>
            </article>
        </section>
    )
}

UserPage.js

import React from 'react'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'

import { selectUserById } from '../users/useRSSlice'
import { selectPostsByUser } from '../posts/postsSlice'

export const UserPage = ({ match }) => {
    const { userId } = match.params
    const user = useSelector(state => selectUserById(state,userId))
    const postsForUser = useSelector(state => selectPostsByUser(state,userId))

    const postTitles = postsForUser.map(post => (
        <li key={ post.id }>
            <Link to={ `/posts/${ post.id }` }>{ post.title }</Link>
        </li>
    ))
    return (
        <section>
            <h2>{ user.name }</h2>
            <ul>{ postTitles }</ul>
        </section>
    )
}

如您所见，这是 Redux 官方文档的示例。

这里我想演示一下路线动画。但是，当没有使用路由动画时（上面根组件中的App组件注释部分），它工作得很好！与动态 URL (match.params) 匹配时，无法读取 null 的属性“params”。

不知道哪里出了问题。我参考real router的官方文档。 children 方法不会导致组件重新安装和卸载。可以不更新匹配吗？

你可以去示例地址试试，如果有解决方法请告诉我，谢谢！

示例代码地址：https://codesandbox.io/s/boring-frost-up86u

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-transition-group reactjs reactjs reactjs reactjs