根目录上的反应路由器通配符路径 [英] React Router wildcard paths on root directory

问题描述

有没有可能像大多数社交媒体网站一样

Somesite.com/用户名，但仍有某些路径，如/LOGIN或/SETTINGS

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path="/:id - but not /login or /settings" component={User} />
            <Route path="/login" component={Login} />
            <Route path="/settings" component={Settings} />
        </div>
    </BrowserRouter>, document.getElementById('root')
);

使用Exact的建议

<BrowserRouter>
    <div>
        <Route path="/:id" component={User} />
        <Route exact path="/settings" component={Settings} />           

    </div>
</BrowserRouter>, document.getElementById('root')

const User = () => {    
    return (
        <h1>user</h1>
    )
}

const Settings = () => {    
    return (
        <h1>settings</h1>
    )
}

转到/设置将显示

用户

设置

推荐答案

是，只需将不带变量的路径移到有变量的路径上方：

<Switch>
  <Route path="/login" component={Login} />
  <Route path="/settings" component={Settings} />
  <Route path="/:id" component={User} />
</Switch>

您需要这样做，因为Reaction路由器将匹配从第一个到最后一个的路由-如果您将:id放在第一个，它将始终匹配。

此处交换机组件的用途是确保仅第一个匹配的路由呈现其组件。

这篇关于根目录上的反应路由器通配符路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！