React Navbar issue with link locaton

Question

I am trying to create a navbar component which changes the link on a specific button based on the current URL.

This is what I have so far: 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;

The idea is the following - if the user is on /test/123, where 123 is any number page and clicks the button Test2 which is rendered by the testfun function, it should get redirected to the /test/123/edit page. If the user is on any other page and clicks the same button, it should get redirected to /test page.

The implementation above renders the button Test2 but it always points to /test regardless of the page the user is on.

Can I have an example of match? like what do u have if /test/123 is given? — TsungJui Wang, Jul 24 '19 at 11:17
@TsungJuiWang if `/test/123/` is the current url, it should get redirected to `/test/123/edit` after hitting the button — Jon Doe, Jul 24 '19 at 11:27
possible duplicate of https://stackoverflow.com/q/49162311/7913142 — cuongtd, Jul 24 '19 at 11:28
The problem is that match is always empty, so the regular expression does not work. — TsungJui Wang, Jul 24 '19 at 11:34
@TsungJuiWang I've been thinking how to make it execute the function and partially/fully re-render the Navbar on URL change but haven't come up with a way to do so — Jon Doe, Jul 24 '19 at 11:39
React-router internally puts two objects called match and location, taking advantage of them will solve your problem gracefully. — TsungJui Wang, Jul 24 '19 at 11:45

score 0 · Answer 1 · answered Jul 24 '19 at 11:59

Managed to make it work by wrapping by Navbar in withRouter from react-router-dom

Here is my Navbar.js after the fix:

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

Now I have access to history, location and match object.

React Navbar issue with link locaton

1 Answers1