React路由器在重新加載時工作，但沒有點擊鏈接

我已經設置了版本4的react-router的React。當我直接在瀏覽器上輸入URL時，路由工作，但是當我點擊鏈接時，URL改變在瀏覽器上（例如http://localhost:8080/categories），但內容不會更新（但如果我刷新，它會得到更新）。React路由器在重新加載時工作，但沒有點擊鏈接

下面是我的設置：

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

我Nav.js使用鏈接如下：

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

App.js如下：

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;

來源

2017-06-04 Suthan Bala

你的瀏覽器路由器在哪裏 – Li357

用withRouter包裝你的組件應該爲你做這項工作。 withRouter需要用於使用Link或任何其他Router道具和不將Router props直接從Route或從Parent Component

路由器道具接收被提供到部件時，其被稱爲像

<Route component={App}/>

一個組件

或

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

，或者如果您放置Links作爲路由器標籤裏的直接子柯

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

在當你想編寫中路由器的子內容作爲一個組成部分，像

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

來源

2017-06-04 17:34:40

仍然沒有運氣:( –

Nvm，我有'browserhistory'在錯誤的位置。調整，固定它。 –

你在哪裏調整它，我有同樣的問題，你可以發佈一個完整的解決方案？ –

可能兩件事情：

你在你的Nav.js文件導入{ Link } from 'react-router-dom'？
可能拼寫/大寫錯誤：您導出export default routes（小寫）但import Routes from './../routes（大寫）。

來源

2017-06-04 16:52:32 sperfecto

是的，我沒有導入鏈接並使用它鏈接到它。我解決了這個問題，沒有運氣。 –

我會去通過你的組件，並確保你只有一個<Router> ... </Router>。另外 - 確保你有一個<Router>...</Router>有些情況下你會使用多個，但是如果你不小心使用了嵌套路由器（因爲你在快速入侵時忘記刪除一個，而當你將它移動到所有種類的地方;-) - 它可能會導致一個問題。

我會嘗試

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

在你最上面的組件（App.js）。

來源

2017-09-14 06:42:36 Peege151

React路由器在重新加載時工作，但沒有點擊鏈接

回答

相關問題