ReactRouter가없는 ReactJS의 간단한 라우터

Question

나는 ReactRouter가 짜증 받았다고 읽었습니다.

const routes = [ 
    { path: '/', action:() => <HomePage /> }, 
    { path: '/game', action:() => <Game /> }, 
    { path: '/game2', action:() => <Game2 /> } 
]; 

I :이 내가 here를 발견 같은 것을 사용하여 변경할 수있는 방법을

ReactDOM.render(<Game />, document.getElementById("root")); 

:

어떻게으로, 엄격하게, 즉 특정 경로에 따라 다른 구성 요소를 렌더링 할 수 복잡하지 않아야한다고 생각합니다.

class SimpleRouter extends React.Component { 
    render() { 
    {this.getContainer()} 
    } 

    getContainer() { 
    const url = window.location.href; 

    const routes = [ 
     { path: '/', action:() => <HomePage /> }, 
     { path: '/game', action:() => <Game /> }, 
     { path: '/game2', action:() => <Game2 /> } 
    ]; 

    const route = routes.find(r => url.endsWith(r)); 

    if (route && route.action) { 
     return route.action(); 
    } else { 
     return <DefaultContainer />; 
    } 
    } 
} 

: 여기

Answer 1

내가 가지고 간단한 응용 프로그램을 위해 한 일이다