根目录上的 React Router 通配符路径

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')
);

建议使用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>
    )
}

转到 /settings 会显示

用户

设置

Answer 1

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

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

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

这里使用 Switch 组件的目的是确保只有 first 匹配的路由会渲染它的组件。

Answer 2

是的，通过使用exact 属性：

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

查看文档：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#exact-bool