Question

我正在尝试创建一个导航栏组件，该组件会根据当前URL更改特定按钮上的链接。

这是我到目前为止的内容： Navbar.js

import React, { useState } from "react";
const testfun = () => {
        if (/\/test\/[0-9]+/.test(window.location.href)) {
            let id;
            const match = /(?:\/)(\d+)(?:\/)?/g.exec(window.location.href);
            console.log(match);
            if (match) {
                id = "/" + match[1] + "/edit";
            } else {
                id = "/test";
            }
            return (
                <Button component={Link} to={`/test${id}`} color="inherit">
                    Test2
                </Button>
            );
        } else {
            return (
                <Button component={Link} to="/test" color="inherit">
                    Test2
                </Button>
            );
        }
    };

export default function Navbar() {
    return (
        <div>
            <Button component={Link} to="/" color="inherit">
                            Home
            </Button>
            <Button component={Link} to="/test" color="inherit">
                            test
            </Button>
            {
               testfun ()
            }
    )
}

App.js

import React from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
    return (
        <Router>
            <Navbar />
            <div className="container">

                <Switch>
                    //Different routes
                </Switch>
            </div>
        </Router>

           )
}

export default App;

想法如下：-如果用户在/test/123上，其中123是任何数字页，然后单击由testfun函数呈现的按钮Test2，则应该得到重定向到/test/123/edit页。如果用户在其他任何页面上并单击相同的按钮，则应将其重定向到/test页面。

上面的实现呈现了Test2按钮，但无论用户在哪个页面上，它始终指向/test。

Answer 1

通过Navbar将withRouter中的react-router-dom中的Navbar包裹起来，使其能够正常工作

在修复后，这是我的Navbar.js：

function Navbar(props) {
   //same logic as above
}
export default withRouter(Navbar);

现在我可以访问历史记录，位置和匹配对象。

用链接位置反应Navbar问题

1 个答案: