React Router 在重新加载时工作，但在单击链接时不工作 [英] React Router work on reload, but not when clicking on a link

问题描述

我已经使用 react-router 版本 4 设置了 React.当我直接在浏览器上输入 URL 时，路由工作，但是当我点击链接时，浏览器上的 URL 会发生变化(例如 http://localhost:8080/categories)，但内容没有更新(但如果我这样做了刷新，它得到更新).

以下是我的设置:

Routes.js 设置如下:

import { Switch, Route } from 'react-router-dom';从反应"导入反应；//组件从'./containers/videos/Categories'导入类别；从./containers/videos/Videos"导入视频；从'./components/Home'导入Home；const 路由 = () =>(<开关><路由精确路径="/" component={Home}/><Route path="/videos" component={Videos}/><Route path="/categories" component={Categories}/></开关>);导出默认路由；

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

视频<Link to="/categories">Categories</Link>

App.js 如下:

从'react'导入React；导入'./app.scss';从./../routes"导入路由；从'./Nav'导入导航；类 AppComponent 扩展了 React.Component {使成为() {返回 (<div className="索引"><导航/><div className="容器"><路线/>

);}}AppComponent.defaultProps = {};导出默认的 AppComponent；

解决方案

用 withRouter 包装你的组件应该可以为你完成这项工作.withRouter 对于使用 Link 或任何其他 Router 道具但不接收 Router 道具 的组件来说是必需的直接来自 Route 或来自 Parent Component

Router Props 在组件被调用时可用

或

<App {...props}/>}/>

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

<路由器><链接路径="/">主页</链接></路由器>

如果您希望将 Router 中的子内容作为组件编写，例如

<路由器><应用程序/></路由器>

路由器道具将无法用于应用程序，因此，您可以使用类似的路由来传递调用

<路由器><路由组件={App}/></路由器>

然而，当你想为高度嵌套的组件提供路由器道具时，withRouter 会派上用场.检查此解决方案

import {withRouter} from 'react-router'类 AppComponent 扩展了 React.Component {使成为() {返回 (<div className="索引"><导航/><div className="容器"><路线/>

);}}AppComponent.defaultProps = {};导出默认 withRouter(AppComponent);

I have setup the React with react-router version 4. The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g http://localhost:8080/categories), but the content don't get updated (But if I do a refresh, it gets updated).

Below is my setup:

The Routes.js setup as follows:

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;

The link I use in Nav.js are as follows:

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

The App.js is as follows:

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;

解决方案

Wrapping your component with withRouter should do the job for you. withRouter is needed for a Component that uses Link or any other Router props and doesn't receive the Router props either directly from Route or from the Parent Component

Router Props are available to the component when its called like

<Route component={App}/>

or

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

or if you are placing the Links as direct children of Router tag like

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

In case when you wish to write the child content within Router as a component, like

<Router>
     <App/>
</Router>

The Router props won't be available to App and hence, you could pass call it using a Route like

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

However withRouter comes in Handy when you want to provide the Router props to a highly nested component. Check this solution

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 在重新加载时工作，但在单击链接时不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！