路径与路由匹配，但未呈现该路由的组件

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>
  );
}

路径与路由匹配，但未呈现该路由的组件

Path matches Route but the component for that route is not rendered

javascript

reactjs

react-router-v4