Pedro Mutter Pedro Mutter -4 years ago 136
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 = () => (
<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} />*/}

<Index children={routes}/>

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) {
/*this.propTypes = {
onBook: React.PropTypes.func.isRequired


render() {
return (
<header className="bh-header navbar navbar-static-top">
<a className="navbar-brand" href="#">
<img alt="Brand" className="bh-logo" src="//"/>
<a className="bh-log-out">
<label>Log out</label>
<span className="glyphicon glyphicon-log-out"/>
<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>
<Link to="#/userAddress">
<i className="glyphicon glyphicon-home"></i> {" User Address"}
<Link to="#">
<i className="glyphicon glyphicon-stats"></i>
{" Charts"}
<span className="glyphicon glyphicon-menu-left"></span>
<ul className="nav nav-second-level collapse">
<a href="flot.html">Flot Charts</a>
<a href="morris.html">Morris.js Charts</a>
<article className="panel panel-default bh-content-container">

Answer Source

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


<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