Question

我已使用.footer { position: fixed; bottom: 0; left: 0; right: 0; background:#ccc; }版本4设置了React。当我直接在浏览器上输入URL时，路由工作正常，但是当我点击链接时，浏览器上的URL会发生变化（例如{{3} }），但内容不会更新（但如果我刷新，它会更新）。

以下是我的设置：

Routes.js 设置如下：

react-router

我在 Nav.js 中使用的链接如下：

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

// Components
import Categories from './containers/videos/Categories';
import Videos from './containers/videos/Videos';
import Home from './components/Home';

const routes = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/videos" component={Videos}/>
    <Route path="/categories" component={Categories}/>
  </Switch>
);

export default routes;

App.js 如下：

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

Answer 1

使用withRouter包装您的组件应该为您完成这项工作。使用withRouter或任何其他Link道具且直接来自Router或Router props未收到Route的组件需要Parent Component 1}}

路由器Props在被调用时可用于组件

<Route component={App}/>

或

<Route render={(props) => <App {...props}/>}/>

或者如果您将Links作为路由器标记的直接子项，如

<Router>
     <Link path="/">Home</Link>
</Router>

如果您希望将路由器中的子内容编写为组件，例如

<Router>
     <App/>
</Router>

路由器道具将无法用于App，因此，您可以使用类似

的路径传递呼叫

<Router>
     <Route component={App}/>
</Router>

然而，当你想要将路径道具提供给高度嵌套的组件时，withRouter会出现在Handy中。检查此解决方案

import {withRouter} from 'react-router'

class AppComponent extends React.Component {

  render() {
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default withRouter(AppComponent);

Answer 2

我会查看您的组件并确保您只有一个<%= form_tag('/examples') do %> Name: <= text_field_tag :name %> <%= submit_tag 'Submit' %> <% end %>。另外 - 确保你有一个<Router> ... </Router> 有些情况下你可能会使用多个，但如果你不小心有嵌套路由器（因为你很快就被黑客攻击而忘记删除一个当你把它移动到各种各样的地方;-) - 它可能会导致一个问题。

我会尝试

<Router>...</Router>

在您最重要的组件（App.js）。

Answer 3

我遇到了完全相同的问题，但是我的原因要简单得多。

在我的情况下，URL字符串的末尾有一个空格：

<Link to={ "/myentity/" + id + "/edit " } >Edit</Link>

当我单击链接时不起作用，但是URL将在地址栏中更新。轻按浏览器地址栏，然后按enter键即可正常工作。

移除固定的空间

<Link to={ "/myentity/" + id + "/edit" } >Edit</Link>

我猜很明显，但很容易忽略。在我注意到之前已经拔了几根头发（显然我到了这里结束了），希望它可以节省别人的几根头发。

Answer 4

包含该组件的顺序在index.js文件中也很重要。 BrowserRouter，Provider然后是App。

ReactDOM.render(
  <BrowserRouter>
      <Provider store={store}>
          <App />
      </Provider>
  </BrowserRouter>,
  document.getElementById('app')
);

Answer 5

我正面临这个问题，因为我没有在应用程序（package.json）依赖项中安装react-router ...

Answer 6

整个应用程序中应该只有一个ROUTER，我认为如果您的头文件是App.js，则ROUTER应该包装整个App.js组件。

Answer 7

你不应该把存储你的导航栏包裹起来

我之前也遇到过同样的问题。错误是我将导航栏组件包裹在一个你应该只在主组件中使用的组件（App.js）

Answer 8

可能有两件事：

您是否在Nav.js文件中导入了{ Link } from 'react-router-dom'？
可能是拼写/大写错误：您导出export default routes（小写）但import Routes from './../routes（大写）。

React Router在重新加载时工作，但在单击链接时则不行

8 个答案: