React Router Deep Link 與動態

Question

我想要動態路由的深層鏈接
我的代碼是這個

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;

我的地區頁面是這個

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;

當我點擊商店按鈕時，頁面停留在區域
我不知道如何使用動態路由移動 Stoer 頁面
問題是什么？？？

對不起我英語不好

Answer 1

問題是你如何聲明你的路線，你需要添加確切的屬性：

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