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

【问题标题】：Path not being found in react-router-dom在 react-router-dom 中找不到路径
【发布时间】：2017-12-16 13:50:34
【问题描述】：

尝试设置 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>
            );
        }
    }

Content 组件在 http://localhost:8080 上工作，但我在尝试 /contact 后得到 404，即联系人

在此先感谢

【问题讨论】：

您的服务器在/contact路径上浏览时是否返回客户端代码？
我不这么认为，看网络我只是得到<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head> <body> <pre>Cannot GET /contact</pre> </body> </html>的回复
您需要安排服务器，以便所有“客户端处理”的路由都返回相同的内容。
好的，非常感谢，我会调查一下，您是否有任何方便的链接可以为我指明正确的方向，这是我需要在 webpack 配置中做的事情吗？
您是对的，非常感谢您使用此链接提供的帮助我能够正确设置 webpack-dev-server 以回退到 index.html for 404s stackoverflow.com/questions/31945763/…，可能需要其他东西生产，但我理解这个问题

标签： reactjs react-router-dom

【解决方案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;

希望对你有帮助:)

【讨论】：

感谢您的回复，我的 App.jsx 还需要我在示例中没有显示的状态（我试图提供尽可能少的代码 :) 所以 App.js 也从 React 扩展而来。组件并且有一个带有 super(props) 等的构造函数，我确实尝试过使用 switch，但它没有用。
:(。很抱歉没有帮助你。我也在制作一个应用程序使用路由。我的应用程序使用此代码。然后等待另一个解决方案^^

【解决方案2】：

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

【讨论】：