React router не работает

Основной компонент:

render() {
    return (
        <div>
            <div className="wrapper">
                {document.URL !== 'http://localhost:3000/auth/login' ?
                    <Header state={this.props} />
                    :
                    ''}
                <div className="main-panel">
                    <div className="content">
                        <Main state={this.props} />
                    </div>
                </div>
            </div>
        </div>
    );
}

Роутер:

export default class Main extends Component {
    render() {
        // console.log('main ', this.props.state)
        return (
                <main>
                    <Switch>
                        <Route  exact  path="/brokers/customers/list/:project/:type/:active"  render={()=><CustomersList state={this.props.state}/>} />
                        <Route path="/brokers/customers/create/:project" render={()=><CustomerCreate state={this.props.state}/>} />
                        <Route path="/auth/login" component={Login} />
                    </Switch>
                </main>
        )
    }
}

Пример ссылки:

<Link to={`/brokers/customers/create/${project.id}`}
                       className="btn btn-xs btn-white btn-round material-icon_success">
                        <i className="material-icons">note_add</i>
                        Create
                    </Link>

index.js

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
, document.getElementById('root'))

При нажатии меняется адрес в браузере но не переходит на другой компонент, переходит только по нажатии enter