Question

我为我的（计时器）应用创建了一个登陆页面，我想在单击“执行”按钮后呈现一个新页面：

<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 / FilipZafran / Interval-Timer上获得

Answer 1

Your route path is different from what you specify in link. It matters

 <Route path="/timerScreen">


      </Route>

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

Answer 2

您的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>

反应：渲染新页面/组件

2 个答案: