react-router-dom“No match 404”在使用“useParams”进入路径时被渲染答案

【问题标题】：react-router-dom "No match 404" get rendered when going to a path with "useParams"react-router-dom“No match 404”在使用“useParams”进入路径时被渲染
【发布时间】：2022-07-16 13:18:37
【问题描述】：

我正在使用 react-router-dom No Match404 并且它工作正常但是当使用 useParams 转到路径 a 时，它会呈现 404 页面，代码如下：

{/* Here it works fine it renders the routes */}
<Route path='/' exact component={Home} />
<Route path='/help' component={Help} /> 
<Route path='/signup' component={Signup} />

{/* The 404 page that render when a path does not exists */}
<Route component={Page404} />

{/* but when I try to render the route with useParams which is the uid I get from firebase it just render the Page404 */}
<Route path='/user/:uid' component={Profile} />

{/*-----------------Profile page------------------------*/}
// heres the profile page that uses useParams

import { useParams} from 'react-router-dom'
import {auth} from './firebase/config'

function Profile() {

  let { uid } = useParams();

  // here I have a variable that get a signed in user Unique Id from firebase 

  const [userId, setUserId] = useState('') 
  auth.onAuthStateChanged((user) => {
  if (user) {
    // User logged in already or has just logged in.
    setUserId(user.uid);
  } else {
    // User not logged in or has just logged out.
  }
 });

if (uid === userId ) {
  return <div>This is your profile</div>
}else{
  return <div>This is someone elses or it does not exist</div> 
}


}

此代码在我删除 404 路由时运行良好，但当我放置它时，Profile 路由会呈现 404 页面。

有没有办法让 404 页面只在路由实际不存在时才呈现。

【问题讨论】：

您是否尝试将 404 路由置于所有其他路由之后。
嗨@JiaSH 谢谢你的回复，是的，我试过了还是不行
请分享一个更完整更全面的代码示例。你指的是什么useParams钩子？ stackoverflow.com/help/minimal-reproducible-example
@DrewReese 感谢您的回复，我已经更新了问题。

标签： reactjs react-router react-router-dom

【解决方案1】：

例如，当您有像 404 这样的一般路径时，您必须将 exact 属性添加到您的其他路由以使其更具体。

像这样：

{/* but when I try to render the route with useParams which is the uid I get from firebase it just render the Page404 */}
<Route exact path='/user/:uid' component={Profile} />

{/* The 404 page that render when a path does not exists */}
<Route component={Page404} />

【讨论】：

谢谢你的回复，我试过了，还是不行
@MinenhleSolsonCele 我忘了说你的 404 Route 应该是最后一个 Route
是的，非常感谢。
@MinenhleSolsonCele 干杯?

【解决方案2】：

检查这个No Match (404)

或者你可以这样实现

这意味着如果上述路线不匹配，唯一可能的解决方案是我们找到了一条实际上并不存在的路线。

<Router>
  <Switch>
    <Route exact path="/" component={Hello} />
    <Route component={NotFound} />
  </Switch>
</Router>

【讨论】：

感谢您的回复，这是我关注的文档，但没有用，
你的404 路由应该是last Route

【解决方案3】：

假设您已将路由渲染为 Switch 组件，那么您需要记住，当仅匹配/渲染路由时，路由路径顺序和特异性很重要！这是因为 Switch 组件匹配并呈现 first 与位置匹配的子 <Route> 或 <Redirect>。

Switch

<Switch> 的独特之处在于它独家呈现路线。在相比之下，与位置匹配的每个 <Route> 都会包含地呈现。

如果您首先列出不太具体的路径，它们将被匹配和呈现。您应该以特定性的相反顺序对路径进行排序。如果做得正确，几乎* 0% 的用例需要exact 属性（当包含匹配路由器内的路由时更有用）。

<Switch>
  <Route path='/user/:uid' component={Profile} />
  <Route path='/help' component={Help} /> 
  <Route path='/signup' component={Signup} />
  <Route path='/' exact component={Home} /> // *
  <Route component={Page404} />
</Switch>

* exact 用于主页 "/" 路径的道具，以防止它与任何其他非主页组件匹配。

【讨论】：

【解决方案4】：

假设您有另一个块 ex。 <Layout>，请确保不要在 <Switch> 和 <Route> 之间放置任何块

<Switch>
    <Layout>
        <Route exact path="/" component={Hello} />
        <Route component={NotFound} />
    </Layout>
</Switch>

进入

<Layout>
    <Switch>
        <Route exact path="/" component={Hello} />
        <Route component={NotFound} />
    </Switch>
</Layout>

【讨论】：