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} />

通过动态反应路由器深度链接

1 个答案: