React Router Deep Link with dynamic

Question

I want deep link with dynamic route
My code is this

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Home from '../Routes/Home';
import Add from '../Routes/Add';
import Region from '../Routes/Region';
import Stores from '../Routes/Region/Stores';

function App() {
  return (
    <div className="App">
            <Router>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/addBook" component={Add} />
                    <Route path="/:region" component={Region} />
                    <Route path="/:region/:store" component={Stores} />
                </Switch>
                <Link to={`/${"ulsan"}`}>
                    <button>go</button>
                </Link>
            </Router>  
    </div>
  );
}

export default App;

and my region page is this

import React from 'react';
import { Link } from 'react-router-dom';

function Region() {
    const store = "hello"
    return(
        <>

                <Link to={`/${"ulsan"}/${store}`}>
                    <button>store</button>
                </Link>
            <div>Region</div>
        </>
    )
}

export default Region;

when I click store button, page is staying Region
I don't know how to move Stoer page with dynamic route
what is the problem???

Sorry I'm not good at English

Answer 1

The Problem is how you declare your routes, you need to add exact attributs:

<Route exact path="/:region" component={Region} />