React Router v4가 포함 된 중첩 된 경로 - 솔루션

Question

React Router v4에서 중첩 된 경로를 얻으려고합니다. 나는이 페이지 https://reacttraining.com/react-router/web/guides/quick-start

를 참조하고하는 것은 그래서 그들은 어떻게 중첩 된 경로는이 분명히 작동이

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

const BasicExample =() => (
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
      </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/topics" component={Topics}/> 
    </div> 
    </Router> 
) 

const Home =() => (
    <div> 
    <h2>Home</h2> 
    </div> 
) 

const About =() => (
    <div> 
    <h2>About</h2> 
    </div> 
) 

const Topics = ({ match }) => (
    <div> 
    <h2>Topics</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 

    <Route path={`${match.url}/:topicId`} component={Topic}/> 
    <Route exact path={match.url} render={() => (
     <h3>Please select a topic.</h3> 
    )}/> 
    </div> 
) 

const Topic = ({ match }) => (
    <div> 
    <h3>{match.params.topicId}</h3> 
    </div> 
) 

export default BasicExample 

하지만 난 클래스 형식으로 변경하고 싶습니다.

그래서 나는

하는 index.js

아래 시도

render((
     <Router> 
      <div> 
       <Route path="/" component={App}/> 
      </div> 
     </Router> 
    ), document.getElementById('root') 
); 

App.js

class App extends Component { 
    render() { 
     return (
      <div className="container"> 
       <header> 
        <span className="icn-logo"><i className="material-icons">code</i></span> 
        <ul className="main-nav"> 
         <li><Link to="/">Home</Link></li> 
         <li><Link to="/about">About</Link></li> 
         <li><Link to="/teachers">Teachers</Link></li> 
         <li><Link to="/courses">Courses</Link></li> 
        </ul> 
       </header> 
       <Route exact path="/" component={Home}/> 
       <Route path="/about" component={About}/> 
       <Route path="/teachers" component={Teachers}/> 
       <Route path="/courses" component={Course}/> 
      </div> 
     ); 
    } 
} 

export default App; 

문제는 그 정확한 URL에 내가 링크를 클릭, 그것은 루트 그리고 그것은 작동하지만 내가 직접 URL을 입력하면 GET/about과 같은 URL은 모두 렌더링됩니다. 링크를 클릭하든 직접 입력하든 상관 없습니다. 나는 왜 App 루트가 내가 왜 이해가 안되는 루트를 제외하고 렌더링되지 않는다고 생각하고있다. 그 사람이 왜 그런지 알 수 있습니까?

또한 첫 번째 예제 코드와 같은 match 매개 변수를 사용할 수 있도록 코드를 변환하려면 어떻게해야합니까? 주제에 매개 변수로 일치하는 객체를 복용하고 내가 추측하고 그래서 그 이전 URL을 참조하여 어떤 종류의

솔루션입니다

내가 비디오를 많이 여기에 솔루션을 제공 할거야 좋아 based React Router 튜토리얼은 React Router v4를 다루지 않습니다. 새로운 React Router와 어려움을 겪고있는 멍청이가이 답변을 얻을 수 있기를 바랍니다.

기본적으로 자산 요청으로 클라이언트 측 경로를 구별 할 수 있어야하며 webpack-dev-server은 완벽한 옵션을 제공합니다.

당신이해야 할 모든

는 항상 서버

이 내 참조입니다로부터 응답이 없을 때 index.html을 가리 것이다 webpack.config.js에

devServer: { 
    port: 3000, 
    historyApiFallback: { 
     index:'index.html' 
    } 
} 

를 추가합니다. 읽을 때 유용 할 수도 있습니다. https://jaketrent.com/post/pushstate-webpack-dev-server/

Answer 1

이것은 일반적으로 클라이언트 측 코드의 내용이 아닌 서버 문제입니다. 당신은 정적 봉사와 표현을 사용하는 경우 :

다음

app.use(express.static('build')); 

디렉토리 build에있는 파일, 또는 예를 들어, 일치하는 다른 명시 적 경로가없는 경우 /about 다음 익스프레스 아무것도 응답하지 않습니다.

위의 정적 미들웨어 이외에도 표현할 수있는 모든 경로를 추가해야합니다. 경로 정의에서 경로를 따라야합니다.

app.get('*', (req, res) => { 
    res.sendFile(path.join(__dirname, '../build', 'index.html')); 
}; 

이 와일드 카드 경로, 그래서 정적 미들웨어 일치하지 않은 아무것도 index.html을 전송됩니다. 일단 당신의 브라우저에 그 땅이 있다면, 반응 라우터가 올바른 구성 요소를 인계받습니다.