ナビゲーションペインに反応するjavascript

Question

app.jsファイルのナビゲーションペインについて簡単に質問しています。私が必要とするのは、app.jsファイルの境界内にとどまっている間に、ルーティングされるページをレンダリングするonclick関数です。私のデフォルトページは、最初にレンダリングされるものであるフォームページでなければなりませんが、ナビゲーションパネルがクリックされたときに、私が望むページをレンダリングしていない理由を理解できないようです。どんな助けでも大歓迎です。また、注意してください。..以下は私のコードです：

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

としては、@クリスが指摘し、あなたが必要とするかもしれ何-ルータを反応させる '（または任意の他のルーティングライブラリ）。このコードがあなたの理解に役立つことを願っています。

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'の詳細については、こちらをご覧ください。