Reactjs React路由器v4路由不工作

我对React是比较新的，我正在尝试找出如何让React路由器工作。我有一个超级简单的测试应用程序，看起来像这样：

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

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

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

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router、Route、Switch、IndexRoute、Link}；
const Home=（）=>单击我
const About=（）=>关于我们
常数测试=（）=>(
)
ReactDOM.render（，document.getElementById（'app'））；

---

当我运行应用程序时，home组件会毫无问题地加载，当我单击“click Me”链接时，url会更改为localhost/about，但是什么也没有发生。如果我点击刷新，我会得到一个“无法进入/走动”的提示。很明显，我做错了什么，但我还没有弄清楚是什么。我也在使用Webpack。

您需要为

/

使用准确的路径，否则它也将匹配

/about

<Route exact path="/" component={Home} />

---

将告诉您与我刚才解释的大致相同。

如果您是从localhost运行，则需要将historyApiFallback:true添加到您的webpack.config文件中。

也许它可以帮助其他人。我忘记使用正确的历史记录，而不是使用

路由器

，我使用的是

浏览器路由器

，它忽略了属性

history={…}

来使用自己的历史记录。我试图用手动创建的历史记录重定向页面，但

BrowserRouter

使用了自己的历史记录。

如果添加

精确的

无法解决问题，我已将其替换为

  <Route exact path="/" component={App} />
  <Route path="/login" component={Login} />
  <Route path="/register" component={Register} />

这个

  <Route exact path="/"> <App /> </Route>
  <Route path="/login"> <Login /> </Route>
  <Route path="/register"> <Register /> </Route>

---

将组件作为路由子级解决了我的页面路由问题我希望它也能帮助其他人

您也可以通过将默认路由始终保留在末尾来解决此问题

//始终在末尾

---

使用开关时，无需输入

精确的

关键字

，我们需要记住，我们指定的路由是从最特定到最通用的。 在您的情况下，您已经在

“/about”

之前指定了

“/”

。 因此，每次react都在寻找

“/about”

，但要向下搜索

单击我
const About=（）=>关于我们
常数测试=（）=>(
)
ReactDOM.render（，document.getElementById（'app'））；

这是另一种可能发生这种情况的方式。这是一个愚蠢的错误，但这就是我的问题所在

我的问题是导入错误。最初，我有以下几点：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

我决定将BrowserRouter组件移动到一个更高的级别，但在删除不再使用的用户路由器组件时，我的导入如下所示：

import { BrowserRouter as Switch, Route } from 'react-router-dom';

因此，实际上，我最终删除了交换机组件并将BrowserRouter别名为交换机

---

开关不再按预期工作是正常的。

控制台中是否有任何消息？这可能是关于组件的

问题，而不是路由器本身的问题。此外，尝试将<代码>关于组件放到/PATH上，查看什么是Acthun.Re：不能得到/关于：考虑使用。这是facebook的福气，它使服务器成为开发中开箱即用的一部分，还有许多其他的开发细节。如果没有它，您需要自己管理将所有内容路由到index.html，或者使用react-router中的哈希路由器。这是我的问题！！谢谢。更多关于这方面的信息将非常有用！如果使用创建react应用程序，您将如何实现此功能？如果您的堆栈部署到公共服务器上，这是一个问题吗？我在本地和服务器上都遇到了相同的问题。这需要添加到文档中，我永远不会知道这一点。我一直在为此发火。我没有webpack.config文件。我该怎么办？嗯，对不起，我有一个类似的问题，虽然我已经添加了确切的，但它仍然没有working@akshaykishore你应该打开一个新的问题，并给我们你正在使用的代码，将重现你的问题。代码是类似的，除了我从另一个文件导入组件。顺便说一下，刷新第二个页面组件时会呈现。
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

import { BrowserRouter as Switch, Route } from 'react-router-dom';