リアストルータv4でネストされたルート - ソリューション

Question

リアストルータv4でネストされたルートを取得しようとしています。私は、彼らがネストされたルートをどのように行う。これは明らかに動作しますが、私はクラスの形式に変更したいこの

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 

でこのページにhttps://reacttraining.com/react-router/web/guides/quick-start

を参照しています。

だから私はそれが正しいURLへのルート、問題は、私がリンクをクリックしたときにということである

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な​​どはできません。私は考えているAppルートが私はなぜ理解していない以外はレンダリングされていません。それは誰でも知っていますか？

また、最初のサンプルコードのようにmatchパラメーターを使用できるようにコードを変換するにはどうすればよいですか？トピックでは、パラメータとしてマッチオブジェクトを取っていると私は推測していますので、それは、その前のURLへの参照のいくつかの種類が

SOLUTIONSある

私は、ビデオの多くとして、ここでソリューションを提供するつもりですオーケーReact Routerのチュートリアルでは、React Router v4は扱っていません。私は新しいReact Routerに苦労しているnoobsがこの答えを助けてくれることを願っています。

したがって、基本的に資産要求でクライアント側のルートを区別することができなければならず、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内のファイル、または例えば一致する別の急行ルートが存在しない場合​​は、何も応答しません。

上記の静的ミドルウェアのほかに表現するには、すべての経路をキャッチする必要があります。ルート定義の後ろにある必要があります。

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

これはワイルドカードのルートなので、静的ミドルウェアと一致していないものはindex.htmlに送信されます。それがブラウザに到着すると、反応ルータが引き継いで正しいコンポーネントをロードします。