路线

<Routes>
            <Route
              exact
              path="/"
              element={
                <div>
                  <BlogForm />
                  <BlogList />
                </div>
              }
            />
            <Route path="/blogs" element={<UserList />} />
            <Route path="/users" element={<UserList />} />
            <Route path="/users/:id" element={<User />} />
            <Route path="/blogs/:id" element={<BlogSingle />} />
          </Routes>

这里是我所有的路线。除了最后一个“/blogs/:id”呈现 <BlogSingle /> 之外，所有路线都有效。它会从我的 <Blog/> 组件中引发未捕获的类型错误，该组件在 <BlogList /> 内呈现。 我在 <Blog/> 中有我的 <Link> 组件，但我不认为这是问题的原因，因为我尝试删除它并手动转到 /blogs/:id。为什么我的最后一条路线会重新呈现 <Blog/> 组件。有什么想法吗？

BLOGLIST

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { initializeBlogs } from '../reducers/blogReducer'
import Blog from './Blog'

const BlogList = () => {
  const dispatch = useDispatch()

  const user = useSelector(({ login }) => {
    return login
  })

  useEffect(() => {
    dispatch(initializeBlogs())
  }, [dispatch])
  const blogs = useSelector(({ blog }) => {
    return blog
  })

  return (
    <div>
      {blogs.map((blog) => (
        <Blog key={blog.id} user={user} blog={blog}></Blog>
      ))}
    </div>
  )
}

export default BlogList

BLOG

[import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { saveLikes, deleteBlog } from '../reducers/blogReducer'
import { Link } from 'react-router-dom'

const Blog = ({ user, blog }) => {
  const \[visualForm, setVisualForm\] = useState(true)
  const dispatch = useDispatch()

  const longFormVisible = { display: visualForm ? 'none' : '' }
  const shortFormVisible = { display: visualForm ? '' : 'none' }

  const toggleForm = () => {
    setVisualForm(!visualForm)
  }

  const showDelete = blog.user.id.toString() === user\[0\].id.toString()

  const blogStyle = {
    paddingTop: 10,
    paddingLeft: 2,
    border: 'solid',
    borderWidth: 1,
    marginBottom: 5,
  }

  return (
    <div>
      <div style={Object.assign({}, blogStyle, longFormVisible)}>
        {blog.title} {blog.author}
        <button type="submit" onClick={toggleForm}>
          hide
        </button>
        <br />
        {blog.url}
        <br />
        likes: {blog.likes}{' '}
        <button type="submit" onClick={() => dispatch(saveLikes(blog))}>
          like
        </button>
        <br />
        {blog.user.name}
        <br />
        {showDelete ? (
          <button type="submit" onClick={() => dispatch(deleteBlog(blog))}>
            delete
          </button>
        ) : (
          ''
        )}
      </div>
      <div style={Object.assign({}, blogStyle, shortFormVisible)}>
        <Link to={`blogs/${blog.id}`}>
          {blog.title} {blog.author}
        </Link>
        <button type="submit" onClick={toggleForm}>
          view
        </button>
      </div>
    </div>
  )
}

export default Blog][1]

BLOGSINGLE

import { useMatch } from 'react-router-dom'
import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { initializeUsers } from '../reducers/userReducer'
import { initializeBlogs } from '../reducers/blogReducer'

const BlogSingle = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(initializeUsers())
  }, [dispatch])

  useEffect(() => {
    dispatch(initializeBlogs())
  }, [dispatch])

  /*const users = useSelector(({ user }) => {
    return user
  })*/

  const blogs = useSelector(({ blog }) => {
    return blog
  })

  const match = useMatch('/blogs/:id')

  const blog = match
    ? blogs.find((blog) => blog.id === match.params.id.toString())
    : null
  console.log(match.params.id.toString())

  if (!blog) {
    return null
  }
  return (
    <div>
      <h1>
        {blog.title} {blog.author}
      </h1>
      <h2>added blogs</h2>
    </div>
  )
}

export default BlogSingle

下面的路线也有效。我使用 <UserList /> 只是为了尝试。我实际上没有 /blogs url 的视图。只有 'blogs/:id'。

<Route path="/blogs" element={<UserList />} />

我在链接中添加了错误。

/localhost:xxxx/blogs/62965dbc5553186f396413ac 当我转到此 URL 时，我收到此错误。 错误

Uncaught TypeError: Cannot read properties of undefined (reading 'user') at Blog (bundle.js:142:27) at renderWithHooks (bundle.js:36135:22) at mountIndeterminateComponent (bundle.js:40752:17) at beginWork (bundle.js:42207:20) at HTMLUnknownElement.callCallback (bundle.js:24059:18) at Object.invokeGuardedCallbackDev (bundle.js:24108:20) at invokeGuardedCallback (bundle.js:24170:35) at beginWork$1 (bundle.js:47132:11) at performUnitOfWork (bundle.js:46269:16) at workLoopSync (bundle.js:46182:9)

提前致谢。