React Router 无法检测到匹配道具答案

【问题标题】：React Router cannot detect match propsReact Router 无法检测到匹配道具
【发布时间】：2019-01-31 15:09:59
【问题描述】：

我正在使用 react-router-dom v4，并且很难以传递参数的方式实现路由器。

const routing = (
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/app" component={Mainpage} />
      <Route exact path="/app/documents" component={Documents} />
      <Route exact path="/app/quizzes" component={Quizzes} />
      <Route exact path="/app/new" component={Documents} />
    </div>
  </Router>
);

const Quizzes = ({match}) => (
  <div>
    <Switch>
      <Route exact path="/app/quizzes" component={QuizzesInterface} />
      <Route exact path="/app/quizzes/:id" component={QuizInterface} />
    </Switch>
  </div>
)

const QuizzesInterface = ({match}) => (
  <div>
    <Background />
    <Interface status='quizzes' index={0}/>
  </div>
)

const QuizInterface = ({match}) => {
  return(
    <div>
      <Background />
      <Interface status='quizzes' index={match.params.id}/>
    </div>
  )
}

当我测试 localhost:3000/app/quizzes 时，QuizzesInterface 加载正常，但是当我测试 localhost:3000/app/quizzes/1 时，例如，没有到达 QuizInterface。我做错了什么？

【问题讨论】：

尝试同时设置strict
谢谢，但还是不行。

标签： reactjs react-router react-router-v4

【解决方案1】：

从 QuizInterface 中移除返回

const QuizInterface = ({match}) => (
    <div>
      <Background />
      <Interface status='quizzes' index={match.params.id}/>
    </div>
)

【讨论】：

不是这样的。我刚刚尝试将 QuizInterface 和 QuizzesInterface 都变成函数，但仍然只有第一个端点有效......
函数是什么意思？他们已经是了。无论如何，你仍然错过了那个回报。
@MichaelSun 我注意到您在QuizInterface 上只有return。
它会加载任何组件吗？还是空白页？
这是一个空白页... - 也没有加载

【解决方案2】：

问题是，在您的应用程序中的任何地方，您都使用了确切的关键字，当您没有嵌套路由时它可以正常工作，但一旦您嵌套了路由，它就会导致问题。

在您的情况下，您将测验路线配置为

<Route exact path="/app/quizzes" component={Quizzes} />

现在测验组件有两条路线

<Switch>
  <Route exact path="/app/quizzes" component={QuizzesInterface} />
  <Route exact path="/app/quizzes/:id" component={QuizInterface} />
</Switch>

因此，当您的 url 路径为 /app/quizzes/1 时，它与 exact path="/app/quizzes" 不匹配，因此不会呈现 Quizzes 组件，这很明显它包含的任何嵌套路由都不会呈现

解决方案是不要将exact 用于具有嵌套路由的路由路径，而是使用Switch 并正确排序您的路由

const routing = (
  <Router>
    <Switch>
      <Route path="/login" component={Login} />
      <Route path="/app/documents" component={Documents} />
      <Route path="/app/quizzes" component={Quizzes} />
      <Route path="/app/new" component={Documents} />
      <Route path="/app" component={Mainpage} />
      <Route path="/" component={App} />
    </Switch>
  </Router>
);

const Quizzes = ({match}) => (
  <div>
    <Switch>
      <Route path="/app/quizzes/:id" component={QuizInterface} />
      <Route path="/app/quizzes" component={QuizzesInterface} />
    </Switch>
  </div>
)

P.S. 您可以使用 exact 关键字作为路由，但请确保它们不会包含嵌套路由

【讨论】：