Reactjs 通过React路由器v4更改组件

大约一个月前，我提出了一个类似的问题，这个问题似乎解决了我所有的问题，但是我想react路由器的版本改变了，现在这一切都变成了垃圾？因为现在这些都不起作用了，根据我的研究，代码有了一些相当大的变化

我只想为一个简单的webapp做一些简单的路由，使用我之前线程中的相同示例，我目前有以下内容：

import {
  BrowserRouter as Router,
  Route, IndexRoute, Switch,
  Link
} from 'react-router-dom';
class Page1 extends Component{
  render(){
    return (<div>Page1</div>);
  }
}

class Page2 extends Component{
  render(){
    return (<div>Page222</div>);
  }
}

class Home extends Component {
    render(){
      return(<h1>I AM HOME</h1>);
    }
}
ReactDOM.render(
         <Router>
             <Switch>
             <Route exact path="/" component={Home}/>
            <Route exact path="/page1" component={Page1}/>
            <Route exact path="/page2" component={Page2}/>
             </Switch>
    </Router>,
    document.getElementById('root')
);

导入{
BrowserRouter作为路由器，
路由，索引路由，交换机，
链接
}从“反应路由器dom”；
类Page1扩展组件{
render（）{
报税表（第1页）；
}
}
类Page2扩展组件{
render（）{
返回（第222页）；
}
}
类Home扩展组件{
render（）{
返回（我在家）；
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

不幸的是，即使这样，我仍然无法在不同的组件之间导航并不断获得信息

无法获取/page1

我还注意到，似乎不再使用this.props.children，或者至少它不再像以前那样工作了

无论如何，我想要的只是能够在页面之间导航并适当地路由它们。我做错了什么

---

编辑：我可能还应该提到，我已经阅读了React Router的文档，并尝试按照所看到的方式进行操作，不幸的是，路由仍然不起作用。

这看起来像是express.js错误，而不是客户端错误。确保您的服务器为所有与其他URL不匹配的URL提供index.html服务。

每当您说

path=/something

时，这里有几点需要考虑，浏览器实际上试图重定向到该路径，但失败了，发生这种情况的原因是

服务器

无论您使用的是

webpack dev server

还是

express服务器

都无法获取该文件。React基本上用于制作

SPA

单页应用程序，因此在一天结束时，您只提供

index.html

的第一页。因此，当您点击

url

时，您必须告诉服务器要提供什么。大多数情况下，您必须提供

index.html

，或者再次提供哪个页面负责您的应用程序

如何解决这个问题：

如果您使用的是

webpack dev server

，并且从与

index.html

相同的目录运行它，则可以继续并将

--historyapi fallback

标志传递给

webpack

，如下所示：

 devServer: {
    historyApiFallback: {
      index: 'templates/index.html'
    },
  }

$webpack dev server--主机0.0.0.0--历史APIfallback

您将看到它将退回到哪个位置

更干净的方法是将

devServer

config键放入

webpack.config.js

。会是这样的：

 devServer: {
    historyApiFallback: {
      index: 'templates/index.html'
    },
  }

这里的

index.html

是从

templates

目录提供的，您可以指定页面的路径

---

将其放入

webpack.config.js

后，您可以运行服务器，您的组件有望呈现。希望这能对您有所帮助。

不是这样，我根本不使用express.js。我将.js文件连接到index.html的方式是通过ReactDOM.render（）。@theJuls您的服务器使用的是什么？只是NodeJSserver@theJuls“http”模块？我不知道你在说什么。除了旧的“npm开始”之外，我还没有真正做过任何关于服务器的事情，因为对于像这样的项目，我从来没有做过，除非现在有了这个更新，否则我必须做一些新的事情，我不知道。