Question

我在app.js文件中有一个关于导航窗格的快速问题。我需要的是一个onclick函数，它将呈现要路由到的页面，同时保持在app.js文件的范围内。我的默认页面应该是表单页面，这是最初呈现的页面，但我似乎无法弄清楚为什么单击导航面板时，它不会呈现我想要的页面。任何帮助将非常感激。另外，请注意..下面是我的代码：

class App extends Component {
render() { 
  return (
    <div className="App">
    <button type="submit" class="Adminfont">Admin Page</button>
      <div className="App-header">
      <img src={logo} className="App-logo" alt="logo"/>
      <img src={filler} className="filler" alt="filler"/>
      <img src={logo2} className="App-logo" alt="logo2"/>
    </div>
    <Form />
    <div class="navpane" id="mynav">
      <a href="Form">Report<br />Food</a>
      <a href= "Events">FRN<br />Events</a>
      <a href="About">About<br />Us</a>
    </div>
    </div>
   );
  }
 }
export default App;

Answer 1

正如@chris所指出的，你需要的可能是'react-router'（或任何其他路由库）。希望这段代码可以帮助您理解。

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const App = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Form</Link></li>
        <li><Link to="/events">Events</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/events" component={Events}/>
      <Route path="/about" component={About}/>
    </div>
  </Router>
);

const Form = () => (<div>Form Page</div>);
const Events = () => (<div>Events Page</div>);
const About = () => (<div>About Page</div>);


export default App;

https://reacttraining.com/react-router/web/guides/quick-start了解有关'react-router'的更多信息。

导航窗格反应javascript

1 个答案: