Question

我的路线组件是这样的：

const Workout = props => {
  console.log(props);
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
};

export default Workout;

然后将这个组件导入到我的 index.js

import Workout from "./views/Workout";

然后我定义我的路线：

<Route exact path="/:weekId/:dayId:/work" component={Workout} />

我在浏览器中找到了路线：

codesandbox.io/week-1/day-1/work

但没有呈现任何内容，没有错误，也没有console.log：（

Answer 1

路径变量应为:dayId，而不是:dayId:。

示例

const Workout = props => {
  console.log(props);
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
};

function App() {
  return (
    <BrowserRouter>
      <Route path="/:weekId/:dayId/work" component={Workout} />
    </BrowserRouter>
  );
}

路径与“路线”匹配，但未呈现该路线的组件

1 个答案: