Javascript 在多个参数之间导航-React js

因此，我最近一直在使用React-js进行一个项目（我认为它类似于React-native），而我对其中的大部分内容非常了解，因为我以前经常使用React-native。我还在学习一些新东西，例如

react路由器dom

npm。因此，我了解基础知识及其工作原理，但我尝试使用随用户而变化的参数（

用户ID

）

下面的代码显示了我当前如何使用路由器。回家（

/

）和

/user/:id

工作时，我不能进入

/user/:id/settings

。如果我尝试转到

设置

，它将同时呈现

/user/:id

页面和下方的

设置页面

我希望能够做到的是，如果用户处于

user/:id

页面，他们可以单击一个按钮，将他们带到

user/:id/settings

页面，而不是当前的问题，该问题会在用户页面下方呈现设置页面

App.jsx

export class App extends React.Component {
    render() {
        return (
            <Router>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={User} />
                <Route path="/user/:id/settings" component={Setting} />
            </Router>
        )
    }
};

导出类应用程序扩展React.Component{
render（）{
返回(
)
}
};

User.jsx

render() {
        return (
            <div>
                {/* Cool information about the user */}
                <div
                    className="optionContent"
                    onClick={() => {
                    let uri = `/user/${this.props.match.params.id}/settings`;
                    this.props.history.push(uri)
                }}
                >
                    Press me
                </div>
            </div>
        );
    }

render（）{
返回(
{/*有关用户的酷信息*/}
{
让uri=`/user/${this.props.match.params.id}/settings`；
this.props.history.push（uri）
}}
>
按我
);
}

额外资料：

• 我曾尝试为用户使用可变参数，但无法完全实现这些功能，因为一旦用户进入

  /user/：id

  页面，按钮将更新url，但不会更新

  中的参数

• 我需要在url中有ID才能从API和其他东西中获取

---

变量url:

/user/：id/：type？

这是因为对于React Router v5（当前是v6完成时的最新版本），默认情况下路由不精确，这意味着对于每个路由，如果当前路由以组件的路由开始，则将显示此组件

例如：

<Router>
    <Route exact path="/" component={Home} />
    <Route path="/user/:id" component={User} />
    <Route path="/user/:id/settings" component={Setting} />
</Router>

<Router>
    <Route exact path="/" component={Home} />
    <Route exact path="/user/:id" component={User} />
    <Route path="/user/:id/settings" component={Setting} />
</Router>