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

Question

所以我最近一直在做一个使用 React js 的项目（我认为它会类似于 React native），而我几乎理解其中的大部分内容，因为我之前经常使用 React native。还有一些我正在学习的新东西，例如 react-router-dom npm。所以我了解基础知识及其工作原理，但我正在尝试使用根据用户而变化的参数 (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>
        )
    }
};

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

额外信息：

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

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

Answer 1

这是因为 React Router v5 目前是 v6 完成后的最新版本，默认情况下路由不是精确的，这意味着对于每个路由，如果当前路由以 a 的路由开头组件，将显示该组件。

以你的例子为例：

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

如果当前路由是"/user/user1"那么它只匹配用户组件。

如果当前路由是 "/user/user1/settings/，那么它匹配用户和设置组件，因此它们都将按照您所查找的方式呈现。

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

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

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

Navigating between multiple params - React js

javascript

reactjs

react-router

react-dom