Question

我有两个完全相同的组件。当我点击我使用 react-bootstrap 创建的导航栏中的导航链接时，一个被重定向到。当我单击应该重定向到该组件的 html 按钮时，完全相同的另一个组件只是重定向到 localhost:3000 而不是“./member”。请帮帮我。

html 按钮和重定向函数看起来像

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);

routes.js 看起来像

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

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

      </Switch>
    
  )
}

export default Routes

我尝试重定向到的组件与我从导航链接单击时重定向到的组件完全相同。我已经降级到历史4.10.1

我的 index.js 是

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();

当我在 url 中包装应用程序路由时转到 ./member 但它没有加载。

Answer 1

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

      </Switch>

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

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

1 个答案: