路径没有被发现在反应路由器-DOM

Question

试图建立阵营路由器V4和路径总是返回404

我有一个基本设置

index.jsx 

    import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    import App from './components/App'; 


    ReactDOM.render(
     <App/>, 
     document.getElementById('app') 
    ); 

App.jsx 

    import { BrowserRouter as Router, Route} from 'react-router-dom'; 
    import Content from './Content'; 
    import Contact from './Contact'; 

    render() { 

     return (
      <div> 
       <Router> 
       <div> 
       <Route path='/' component={Content} /> 
       <Route path='/contact' component={Contact} /> 
       </div> 
       </Router> 
      </div> 
      ) 
     } 

both components are basic react components 

Content.jsx/Contact is the same just different class name of Contact 

    import "../css/content.css"; 

    import React from 'react'; 

    export default class Content extends React.Component { 
     render(){ 
      return (
       <div id="content"> 
        <div className="inner"> 
         <div className="bgWrap"> 
          <h2>Welcome</h2> 
          <p>Hey</p> 

         </div> 
        </div> 
       </div> 
      ); 
     } 
    } 

内容组件适用于http://localhost:8080但我得到一个404一次我试着/接触，接触

提前

Answer 1

由于达文特赖恩在评论，来解决我的问题，我需要配置的WebPack-DEV-服务器到所有客户端路由返回到我的情况的index.html ，然后我会用路由器来处理我的404。配置webpack我跟着这How to tell webpack dev server to serve index.html for any route

Answer 2

尝试了很多感谢：

App.jsx 

import {Switch as RouterSwitch, Route} from 'react-router-dom'; 
import Content from './Content'; 
import Contact from './Contact'; 

const App=()=> (
      <RouterSwitch>   
      <Route path='/' component={Content} /> 
      <Route path='/contact' component={Contact} />   
      </RouterSwitch> 
     ); 

export default App; 

希望这有助于您:)