After refresh route display first route

I have this routing system

constructor(props){
    super(props);
    this.state = {
        url: window.location.pathname,
        about: '',
        user: '',
        userPath: ''
    }


}

componentDidMount(){
    this.setState({
        about: this.state.url + '/about',
        user: this.state.url + '/user/1',
        userPath: this.state.url + '/user/:id',

    })

}

Link and view is generated here

//generated link
                    <ul>
                        <li>
                             <NavLink exact activeClassName="active" to={this.state.url}>Home</NavLink>
                        </li>
                        <li>
                            <NavLink activeClassName="active" to={this.state.about}>About</NavLink>

                        </li>
                        <li>
                            <NavLink activeClassName="active" to={this.state.user}>User</NavLink>
                        </li>
                    </ul>
//render view
                    <Route exact path={this.state.url} component={Home} />
                    <Route path={this.state.about} component={About} />
                    <Route path={this.state.userPath} component={User} />

It works correctly but all the times I have a problem with url address. The biggest is that I go to any route (it works) and I refresh that, any time it display me first route (Home in this example) but url point to outher route. What is wrong?