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

Question

所以我最近一直在使用React js进行一个项目(我认为它会类似于React native(，而我几乎理解了其中的大部分内容，因为我以前经常使用React native。我仍然在学习一些新东西，例如react-router-domnpm。所以我了解它的基本原理和工作原理，但我尝试使用根据用户(User ID(而变化的参数。

下面的代码显示了我当前如何使用路由器。当回家(/(和/user/:id工作时，我不能去/user/:id/settings。如果我尝试转到settings，它会同时渲染/user/:id页面，并在下面渲染settings page。

我想做的是，如果用户在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>
)
}
};

用户.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>
);
}

额外信息：

• 我尝试过为用户使用可变参数，但我无法完全实现这些功能，因为一旦用户进入/user/:id页面，按钮就会更新url，但不会更新this中的参数
• 我需要在url中有ID，以便从API和其他一些东西中获取

变量url:/user/:id/:type?

Answer 1

这是因为React Router v5目前是最新版本，因为v6已经完成，默认情况下路由并不准确，这意味着对于每个路由，如果当前路由以组件的路由开始，则会显示该组件。

例如：

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

如果当前路由是"/user/user1"，则它仅与User组件匹配。

如果当前路由是"/user/user1/settings/，则它与"用户"one_answers"设置"组件匹配，因此它们都将按照您的查找进行渲染。

要修复它，只需在需求较少的组件上使用exact关键字即可。

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