用参数反应路线

Question

我正在尝试关注本文： https://scotch.io/courses/using-react-router-4/route-params

我创建了以下内容：

const Main = () => (
  <div>
    <main>
      <Switch>
        <Route exact path="/:token" component={Home} />
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
      </Switch>
    </main>
  </div>
);

当我添加：token时，我的路由器不再起作用。我在这里想念什么吗？应该相当简单。

Answer 1

这里的问题是/:token也匹配/page和/page2。重新排列路线，使/:token位于结尾。这样做将确保如果路由与/page1或/page2相匹配，则它们比/:token更为可取并呈现

const Main = () => (
  <div>
    <main>
      <Switch>
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
        <Route exact path="/:token" component={Home} />
      </Switch>
    </main>
  </div>
);