React: 渲染新的pagecomponent。

Question

我为我的(Timer)App创建了一个登陆页，我想在我点击GO按钮后呈现一个新的页面。

<Link to="/TimerScreen"
        id="goButton">GO</Link>

当我点击按钮时，它呈现的是一个空页面，但应该有一个h1 TEST的页面。

import React from 'react';
class TimerScreen extends React.Component {

    render() {
      return (
        <div>
               <h1>test</h1>
                   </div>
      );  }  }
export default TimerScreen;

完整的代码可在github FilipZafranInterval-Timer上找到。

Answer 1

你的app.js路由路径代码

 return (
<Router>
    <Switch>
       <Route path="/timerScreen"></Route>
       <Route path="/">
    <Settings/>
  </Route>
    </Switch>
    </Router>

改变喜欢和尝试

<Router>
  <nav>
     <Link to="/timescreen">timescreen</Link> //link the components here
  </nav>
  <Switch>
     <Route path="/timescreen"></Route> //  define components inside switch statement
  </Switch>
</Router>

Answer 2

你的路径与你在链接中指定的路径不同。这很重要

 <Route path="/timerScreen">


      </Route>

<Link to="/TimerScreen"
        id="goButton">GO</Link>