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

【问题标题】：React router routes to wrong component with params使用参数将路由器路由反应到错误的组件
【发布时间】：2021-03-17 02:31:38
【问题描述】：

我正在尝试使用 react-router 路由 toa。用户个人资料页面。

我的用户行组件如下：

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

路由器：

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>

    );
  }

我还有一些受保护的路由，我已将它们作为消费者添加到 firebase auth。如有必要，我可以分享代码，但我不认为这是这里的问题。

问题是，当我路由到 http://localhost:3000/profile/hellonakul 时，我被重定向到 home，即 / 路径。

相反，我应该被路由到我的 UserProfile 组件，这不会发生。

编辑：路线：

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";

【问题讨论】：

routes.USER 和其他变量的值是什么？
添加路线

标签： reactjs typescript routes react-router

【解决方案1】：

我想 Home 路由也必须是exact={true}。

编辑：我认为在您的情况下，只有 Home 路由需要 exact={true} 属性。该属性用于解决相似路由之间的冲突。

【讨论】：