我的反应路线重定向到 localhost:3000 而不是它应该重定向到的页面

Question

I have 2 components both are exactly the same. one is redirected to when I click on a Navlink inside of my navbar that I created using react-bootstrap. The other component that is exactly the same just redirects to localhost:3000 and not "./member" when I click on the html button that should redirect to that component. Please help me.

the html button and the function to redirect look like

import {Link, Route, withRouter, useHistory} from 'react-router-dom'
const Posts = (props) => {
  const dispatch = useDispatch();
    const history = useHistory();

    const getProfile = async (member) => {
     //   const addr = dispatch({ type: 'ADD_MEMBER', response: member })
        console.log(member)
        history.push('/member')
    
    }
    
  return (
      <div>
        <button onClick={() => getProfile(p.publisher)}>Profile</button> 

      </div>
  )
}

export default withRouter(Posts);

The routes.js looks like

const Routes = (props) => {
  return (
      <Switch>

      <Route path="/member" exact component={Member} /> 

      </Switch>
    
  )
}

export default Routes

The component that I am trying to redirect to is exactly the same as one that is redirected to and working when I click on it from the navlink. I have downgraded to history 4.10.1

My index.js is

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

import { Router, Route } from 'react-router-dom';
import * as history from 'history';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
const store = createStore(rootReducer)
const userHistory = history.createBrowserHistory();
ReactDOM.render(
    <Provider store = {store}>
        <Router history={userHistory}>
<BrowserRouter>


            <Route component={App} />
</BrowserRouter>

        </Router>
    </Provider>,
    document.getElementById('root'));


serviceWorker.unregister();

When I wrap the app route in the url goes to./member but it does not load.

Answer 1

 <Switch>
      <Route path="/" exact component={app} /> 
      <Route path="/member" component={Member} /> 

      </Switch>

---

<button onClick={() => history.push(`/${p.publisher}`)}>Profile</button>