탐색 창 반응 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'에 대한 자세한 내용은