时间戳

首页 > 解决方案 > 反应路由器。如何检查 URL: ID 是否存在于功能组件中？

javascript - 反应路由器。如何检查 URL: ID 是否存在于功能组件中？

问题描述

组件加载到正确的路径上，例如 /characters/kabal -- (kabal it`s ID)

但是，如果您只是在/characters/之后输入任何文本 ，例如/characters/548fnufndf或/characters/548fnufndf/dnbsdnhdj/dfmd，它就会加载

如何在加载组件之前检查功能组件中的正确路径，如果路径错误，则重定向到另一个页面？

//App.js
          <Switch>
              <Route
                path="/characters"
                exact
                component={Characters}/>
              <Route
                exect
                path="/characters/:id"
                render={(props) => <CharacterPage {...props}/>}
              />
              <Route
              exect
                path="/settings"
                component={Settings}/>}
                />
              <Route exect insecure component={Error} />
        </Switch>


//Link to component and array of IDs
 const item = [
    {charId:'fujin'},
    {charId:'scorpion'},
    {charId:'kabal'}
]

    <Link
        exact="true"
        to={{
          pathname:`/characters/${item.charId}`,
        }}
    </Link>
    
//A component that should be loaded only if a link with this id exists.

  const Scrollable = ({match}) => {
      useEffect(() => {
         let id = data[match.params.id]
          if(!id) {
             return <Redirect to="/" />
          }
  }, [])
  }

标签： javascriptreactjsreact-router

解决方案

你使用的是什么版本的 React-router？

这是一个类似的问题：React-Router: No Not Found Route?

总之

如果您使用的是 v4 或 v5，则：

保持路径（网址保持不变）

<Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

重定向到另一条路线（更改网址）

<Switch>
    <Route path="/users" component={MyComponent} />
    <Route path="/404" component={GenericNotFound} />
    <Redirect to="/404" />
</Switch>

还要注意顺序，NotFoundComponent 必须在该路径的最后。也像@cbr 所说的，exect应该是exact.

推荐阅读