Question

我尝试使用v4 react路由器，但路由器总是呈现初始路径（＆＃39; /＆＃39;）。我正在使用

react: ^16.2.0

react-dom: ^16.2.0

react-router-dom: ^4.2.2

当我尝试渲染/＃/ account时，它会呈现Home而不是Account。

＆＃13;

import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Home from "./components/Home/Home";
import Account from "./components/Account/Account";
import Layout from "./components/Layout";

const app = document.getElementById('app');

ReactDOM.render(
  <Router>
      <div>
        <Route exact path="/" render={() => (<div>Home</div>)} />
        <Route path="/account" render={() => (<div>Account</div>)} />
      </div>
  </Router>,
  app
)

＆＃13;

Answer 1

解决此问题的方法之一是使用来自react-router-dom的<Switch>，您可以将其导入为：

import {Switch} from 'react-router-dom';

然后将<Route>包裹在<Switch>内我认为最好将"/"放在最后并给出默认组件，如：

  <Router>
      <div>
        <Switch>
          <Route path="/account" render={() => (<div>Account</div>)} />
          <Route exact path="/" render={() => (<div>Home</div>)} />
          <Route component={NoMatch}/>
        </Switch>
     </div>
  </Router>

您可以阅读有关<Switch> Here

的更多信息

Answer 2

这是预期的行为，因为“ / home”将同时匹配“ /”和“ home”，因此可以看到这两个组件，可以通过在“ /” Route属性中添加“ exact”参数来解决，如下所示：< / p>

<Route path="/" exact component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>

Answer 3

使用<BrowserRouter>的另一种方法是<HashRouter>，它使用URL的哈希部分（即window.location.hash）来保持UI与URL同步。

请参阅：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

因此，在您的示例中，您只需导入HashRouter即可

import { HashRouter as Router, Route } from 'react-router-dom'

Answer 4

我知道它晚了一点，但是面临着相同的问题，并且想到了与所有人共享。

通过在“路线”上添加“精确”参数来解决

<Route path="/contact-us" exact component={component-name} />

Answer 5

我参加聚会有点晚了，但是我遇到了这个问题，我敢肯定我不会成为最后一个。

在我的情况下，一页上有一个组件，而另一页上有链接。

例如，它可能是帐户页面上的<Button onClick={goToHomePage()} />Go Home</Button>组件。呈现帐户页面后，将立即调用goToHomePage()，将用户重新路由到主页。它会很快发生，并且会造成一些混乱。正确的路由器设置也会发生这种情况。

我希望这对以后的人有所帮助！

React路由器总是渲染＆＃39; /＆＃39;路径

5 个答案: