在 react-router-dom 中找不到路径

Question

正在尝试设置 React Router 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 上工作，但我尝试 /contact 后收到 404，联系人

非常感谢

Answer 1

尝试：

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;

希望对您有所帮助:)

Answer 2

感谢 Davin Tryon 的评论，为了解决我的问题，我需要将 webpack-dev-server 配置为 return 所有客户端路由到我的案例 index.html，然后我将使用他路由器来处理我的 404。配置 webpack 我遵循了这个 How to tell webpack dev server to serve index.html for any route

在 react-router-dom 中找不到路径

Path not being found in react-router-dom

reactjs

react-router-dom