Question

我是新来的反应者，所以我需要了解如何动态路由。我有一个主页www.abc.com。在该页面中，我有2个可以动态呈现的块，分别是新交易和最新产品。两者均具有查看更多按钮。

当我点击“新政”的查看更多按钮时，我想转到新页面www.abc.com/new-deal。当我单击“近期产品”的查看更多按钮时，我要导航至www.abc.com/recent-product。

如何动态路由？

Answer 1

您需要在首页App组件内添加Route。遍历嵌套路由documentation

const ViewDeal = () => {
  return <strong>Deal Component</strong>;
};

const RecentDeal = () => {
  return <strong>Recent Deal Component</strong>;
};

const App = () => {
  return (
    <div>
      <div>
        <Link to="/viewDeal">View Deal</Link>
      </div>
      <div>
        <Link to="/recentDeal">View Recent Deal</Link>
      </div>
    </div>
  );
};

const Routes = () => {
  return (
    <Router>
      <Route exact path="/" component={App} />
      <Route path="/viewDeal" component={ViewDeal} />
      <Route path="/recentDeal" component={RecentDeal} />
    </Router>
  );
};

render(<Routes />, document.getElementById("root"));

Working Demo

动态反应路由

1 个答案: