Pedro Mutter Pedro Mutter - 1 year ago 74
React JSX Question

Pathname from the prop history.location of the Router doesn't update

I'm trying to develop a web system using React Router DOM, I follow exactly how it is explained on their documentation and live examples. But the prop history.location.pathname of the router, is always '/', when I change it manually (React Developer Tool), it works, but when I just go through the URL or a Link component, don't work.

router props

//routes file

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route, IndexRedirect, IndexRoute, Switch} from 'react-router-dom'
import Index from "./index.jsx";
import UserAddress from "./UserAddress.jsx";

var routes = () => (
<div>
<Switch>
<Route exact path="/" component={()=>(<h1>Teste</h1>)} key="1"/>
<Route path="/home" component={UserAddress} key="2"/>
<Route path="/userAddress" component={UserAddress} key="3"/>
{/*<IndexRedirect to="login" />*/}
{/*<Route path="login" component={Login} />*/}
</Switch>
</div>
);

ReactDOM.render((
<Router>
<Index children={routes}/>
</Router>
),
document.getElementById('container')
);

module.exports = true;


//component file

'use strict';
import React from 'react';
import {Link} from 'react-router-dom';

export default class Index extends React.Component {

constructor(props) {
super(props);
/*this.propTypes = {
onBook: React.PropTypes.func.isRequired
};*/
}

componentWillReceiveProps(newProps){
this.forceUpdate();
}

render() {
return (
<main>
<header className="bh-header navbar navbar-static-top">
<a className="navbar-brand" href="#">
<img alt="Brand" className="bh-logo" src="//behive.io/wp-content/uploads/2016/11/DEFAULT-CURRENT-LOGO-01-e1479943327763.png"/>
</a>
<a className="bh-log-out">
<label>Log out</label>
<span className="glyphicon glyphicon-log-out"/>
</a>
</header>
<div className="navbar-default sidebar" role="navigation">
<div className="sidebar-nav navbar-collapse">
<ul className="nav" id="side-menu">
<li className="sidebar-search">
<div className="input-group custom-search-form">
<input type="text" className="form-control" placeholder="Search..."/>
<span className="input-group-btn">
<button className="btn btn-default" type="button">
<i className="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</li>
<li>
<Link to="#/userAddress">
<i className="glyphicon glyphicon-home"></i> {" User Address"}
</Link>
</li>
<li>
<Link to="#">
<i className="glyphicon glyphicon-stats"></i>
{" Charts"}
<span className="glyphicon glyphicon-menu-left"></span>
</Link>
<ul className="nav nav-second-level collapse">
<li>
<a href="flot.html">Flot Charts</a>
</li>
<li>
<a href="morris.html">Morris.js Charts</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<article className="panel panel-default bh-content-container">
{this.props.children()}
</article>
</main>
);
}
}

Answer Source

Router defines path as normal path(as path="/home"). So you <Link/> component should point to exact same path.

Try

<Link to="/">
<Link to="/home">
<Link to="/userAddress">

By using <Link to="#/userAddress"> you are changing hash parameter, which can be seen in hash props.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download