Reactjs React路由器在重新加载时工作，但在单击链接时不工作

我已经用

React路由器
version 4设置了React。当我直接在浏览器上输入URL时，路由会起作用，但是当我单击链接时，浏览器上的URL会更改（例如），但内容不会更新（但如果我刷新，它会更新）

以下是我的设置：

Routes.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;

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

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component {

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

AppComponent.defaultProps = {
};

export default AppComponent;

从'react router dom'导入{Switch，Route}；
从“React”导入React；
//组成部分
从“./容器/视频/类别”导入类别；
从“./容器/视频/视频”导入视频；
从“./components/Home”导入Home；
常数路由=（）=>(
);
导出默认路径；

我在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;

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

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component {

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

AppComponent.defaultProps = {
};

export default AppComponent;

视频
类别

App.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;

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

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component {

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

AppComponent.defaultProps = {
};

export default AppComponent;

从“React”导入React；
导入“/app.scss”；
从“/../Routes”导入路由；
从“./Nav”导入Nav；
类AppComponent扩展了React.Component{
render（）{
返回(
);
}
}
AppComponent.defaultProps={
};
导出默认AppComponent；
用路由器
包装组件应该可以帮你完成这项工作<对于使用
链接
或任何其他
路由器
道具且不直接从
路由
或从
父组件
接收
路由器道具的组件，需要使用路由器

当组件被调用时，路由器道具对其可用

<Route component={App}/>

如果您希望将子内容作为组件写入路由器，如

<Router>
     <App/>
</Router>



路由器道具将不适用于应用程序，因此，您可以使用类似于

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



但是，当您想要为高度嵌套的组件提供路由器道具时，withRouter非常方便。检查此解决方案

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);

从“react router”导入{withRouter}
类AppComponent扩展了React.Component{
render（）{
返回(
);
}
}
AppComponent.defaultProps={
};
使用路由器导出默认值（AppComponent）；
我会仔细检查您的组件，确保您只有一个
。另外--确保你有一个
…
可能会有使用多个路由器的情况，但是如果你不小心使用了嵌套路由器（因为你很快就进行了黑客攻击，当你将路由器移动到各种地方时忘了删除一个；-），这可能会导致问题

我会试试看

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

// Other Imports

...

return (
  <Router>
    <div className="index">
      <Nav /> <!-- In this component you have <Links> -->
      <div className="container">
        <Routes />
      </div>
    </div>
  </Router>
);

导入{
BrowserRouter作为路由器，
}从“反应路由器dom”
//其他进口
...
返回(
);

在你最上面的组件（App.js）中。
我遇到了完全相同的问题，但我的原因要简单得多

在我的例子中，URL字符串的末尾有一个空格：

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

我想这很明显，但很容易被忽视。在我注意到（显然我在这里结束了）之前，我已经拔了几根头发，希望它能为其他人省下几根头发。
我面临这个问题，因为我没有在应用程序（package.json）依赖项中安装
react router
。
整个应用程序中应该只有一个路由器，我认为如果你的头文件是app.js，然后路由器应该包装整个App.js组件。
您不应该包装存储在或中的导航栏

我以前也有过同样的问题。错误在于我将导航栏组件包装在一个只应在主组件（App.js）中使用的文件中
你的
浏览器路由器在哪里
你的问题解决了吗？我有完全相同的问题，我对你的最终解决方案感兴趣。@dns\u nx我的问题放错了地方。正确的答案应该是这样的：@SuthanBala-你最近的命令救了我-在绕圈子转了6个小时（？！）后。我根本没用浏览器。。。只是路由器。哎呀…还是不走运：（Nvm，我的
浏览器历史记录
放错了位置。调整后它就修好了。你在哪里调整的，我也有同样的问题，你能发布一个完整的解决方案吗？如果使用react redux的connect，然后用withRouter环绕该连接。例如：
导出默认withRouter（connect（MapStateTops）（App））
。解决方案这里双
是我的问题。切换到Browserrouter而不仅仅是路由器对我有效！谢谢这个解决方案对我有效。我在我的应用程序中使用了双路由器。谢谢！非常容易被忽略