複数のルートを一度に表示するReact-router v4

Question

react-router-domを使用している私のルーティングがすべてのルートを一度に表示しているという問題が発生しています。だから私は、私のAppコンポーネントをレンダリングし、ルーティングを含むスタート、私はお互いの上に各ルートのページを見ている。だから、それは次のようになります。

すっごくが、これはすべてのキックオフされる方法を開始するために、このページ上のアプリケーション・コンポーネントをレンダリングしている私のindex.jsxです：

私は

// Dependencies 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

// Components 
import App from './components/app.jsx'; 

// Styles 
import './index.scss'; 

const container = document.getElementById('main'); 

ReactDOM.render(<App />, container); 

アプリケーションコンポーネントは、ルーティングがように設定されている：

// Dependencies 
import React from 'react'; 
import { BrowserRouter as Router, Route, Match, Miss } from 'react-router-dom'; 

// Components 
import Login from './pages/login/login.jsx'; 
import Home from './pages/home/home.jsx'; 

// Styles 
import './app.scss'; 

const App =() => { 
    return (
    <Router> 
     <div> 
      <Route exact pattern='/' component={Login}/> 
      <Route exact pattern='/home' component={Home}/> 
     </div> 
    </Router> 
); 
}; 

export default App; 

これは私のログイン/ホームコンポーネントである（ホームコンポーネントだけでログインを置き換えるとまったく同じです）：

// Dependencies 
import React from 'react'; 

// Styles 
import './login.scss'; 

class Login extends React.Component { 
    render() { 
    return (
     <div className="content"> 
     <div className='title'> 
      Login Page 
     </div> 
     </div> 
    ); 
    } 
} 

export default Login; 

はまた、私はhttp://localhost:9999/homeに移動したときに、私は、このエラーを取得していますことに気づい：

何かが明らかに正しく配線されていない、と私は違うとドキュメントで少し混乱しています既存のバージョン。これを解決する方法についてのアドバイスは大変ありがたいです！ React Trainingから

Answer 1

：パスなし

ルートが常に一致します。

あなたのケースでは、私はパターンを使用しているので、両方とも常に一致します。