在根目录上反应路由器通配符路径

Question

是否有可能像大多数社交媒体网站一样做类似的事情

somesite.com/username 但仍有某些路径，如 /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')
);

使用精确的建议

<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>
    )
}

转到 /settings 将显示

用户

设置

Answer 1

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

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

你需要这样做，因为 React Router 会匹配从第一个到最后一个的路由——如果你把:id它放在第一个，它总是会被匹配。

此处 Switch 组件的目的是确保只有第一个匹配的路由才呈现其组件。