Reactjs 使用参数将路由器路由反应到错误的组件

我正在尝试使用

react router

路由到。用户配置文件页面

我的用户行组件如下所示：

render() {

        return (
            <div className="userrow">
                <div className="userrow-username">
                    {this.props.name}
                </div>
                <div>
                    <Link to={`/profile/${this.props.username}`} style={{ textDecoration: 'none' }}>
                        <Button variant="outlined" color="primary" size="small">
                            View Profile
                        </Button>
                    </Link>
                </div>
            </div>
        )
    }

---

我想回家的路线也必须是

exact={true}

---

编辑：我认为在您的情况下，只有主路由需要

exact={true}

属性。此属性用于解决类似路由之间的冲突。

什么是

路由。用户

和其他变量值？添加了路由

public render() {

    return (this.state.loading === true) ? <h1>Loading</h1> : (

      <BrowserRouter>

        <div>
          <HeaderNav />

          <Switch>
            <Route exact={true} path={routes.LANDING} component={LandingPage} />
            <Route exact={true} path={routes.SIGN_UP} component={SignUp} />
            <Route exact={true} path={routes.LOGIN} component={Login} />
            <Route exact={true} path={routes.PASSWORD_FORGET} component={PasswordForget} />
            <Route path={routes.USER} component={UserList} />
            <Route path={routes.PROJECT} component={Project} projectName='Nakul' />
            <Route path={routes.HOME} component={Home} />
            <Route exact={true} path="/profile/:username" component={UserProfile} />
          </Switch>
        </div>
      </BrowserRouter>

    );
  }

export const SIGN_UP = "/signup";
export const LOGIN = "/login";
export const LANDING = "/landing";
export const HOME = "/";
export const ACCOUNT = "/account";
export const PASSWORD_FORGET = "/password_forget";
export const PROJECT = "/project";
export const USER = "/user";