javascript - React Router 动态 url 渲染在静态 url 上

Question

我有一个 path="/:user" 但它也会呈现在 /register 和 /login 等其他静态页面中，因为 react-router 认为它也是一个“用户名”。如何在不更改任何路由器的路径名的情况下解决此问题？即如果可能的话，制作一个白名单？

想要的行为：

/1 -> 呈现“hi user 1”页面

/login -> 呈现登录页面

/register -> 呈现注册页面

发生的行为：

/1 -> 呈现“hi user 1”页面

/login -> 呈现登录和“嗨用户登录”页面

/register -> 呈现注册和“嗨用户注册”页面

我的代码

ReactDOM.render(
  <AuthProvider>
    <ThemeProvider theme={theme}>
      <Router history={history}>
        <App />
        <Route exact path="/register" component={Register} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/admin" component={Admin} />
        <Route exact path="/:user" component={User} />
      </Router>
    </ThemeProvider>
  </AuthProvider>,
  document.getElementById('root')
);

Answer 1

尝试使用开关。它将停止寻找匹配并呈现第一个匹配的路线。这是文档的链接：https ://reactrouter.com/web/api/Switch

import { Route, Switch } from "react-router";

ReactDOM.render(
  <AuthProvider>
    <ThemeProvider theme={theme}>
      <Router history={history}>
        <App />
        <Switch>
          <Route exact path="/register" component={Register} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/admin" component={Admin} />
          <Route exact path="/:user" component={User} />
        </Switch>
      </Router>
    </ThemeProvider>
  </AuthProvider>,
  document.getElementById('root')
);