React-Router-Dom <Link> 不渲染页面

Question

我正在构建一个使用 Unsplash 呈现用户照片的练习应用。我正在使用 React 和 Redux。使用react-router-dom，我正在尝试遵循文档，但我发现设置起来非常混乱。这是我到目前为止所拥有的。当我从返回的搜索结果列表中单击结果时，我希望它呈现用户页面配置文件。

index.js（确保我正确设置了react-router-do）：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
// import store from './app/store';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import reducers from "./app/reducers/rootReducer"; 
import * as serviceWorker from './serviceWorker';

const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducers, storeEnhancers(applyMiddleware(thunk)));

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

顶部组件App

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Images from "./app/components/Images";
import Search from "./app/components/Search";
import UserProfile from "./app/components/UserProfile";

import "./App.css";

function App() {
  return (
    <>
      <Search />
      <Images />
      <Router>
        <Route link="/userProfile">
          <UserProfile />
        </Route>
      </Router>
    </>
  );
}

export default App;

search（searchResults 的父组件，如果存在）：

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { queryAction } from "../actions/queryAction";
import SearchResults from "./SearchResults";

const Search = (props) => {
  const [query, setQuery] = useState("");
  console.log(props.searches);

  const searchPhotos = async (e) => {
    e.preventDefault();
    console.log("submitting form");
    props.queryAction(query);
  };

  const showUsers = (user, e) => {
        e.preventDefault()
       console.log(user)
  
  };

  return (
    <>
      <form className="form" onSubmit={searchPhotos}>
        <label className="label" htmlFor="query">
          {" "}
        </label>
        <input
          type="text"
          name="query"
          className="input"
          placeholder={`Try "dog" or "apple"`}
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <button type="submit" className="button">
          Search
        </button>
      </form>

      <SearchResults results={props.searches} showUsers={showUsers} />
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    searches: state.searches,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    queryAction: (entry) => dispatch(queryAction(entry)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Search);

searchResults:

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { getUserAction } from "../actions/getUserAction";
import { connect } from "react-redux";


const SearchResults = (props) => {
  const { results } = props.results.searches;

  const handleClick = (result, e) => {
    e.preventDefault();
    props.getUser(result.username);
  };
  return (
    <>
      {results &&
        results.map((result, id) => {
          return (
            <div key={id}>
              <Router>
                <Link to="/userProfile" onClick={(e) => handleClick(result, e)}>
                  {result.username}
                </Link>
              </Router>
            </div>
          );
        })}
    </>
  );
};

const mapDispatchToProps = (dispatch) => {
  return {
    getUser: (query) => dispatch(getUserAction(query)),
  };
};

export default connect(null, mapDispatchToProps)(SearchResults);

最后是UserProfile 组件：

import React from 'react';
import { connect } from 'react-redux';

const UserProfile = props => {
  
   console.log(props)
    return (
        <div>
        
        </div>
    );
}

const mapStateToProps = state => {
    return {
        user: state.users 
    }
}

export default connect(mapStateToProps, null)(UserProfile);

Answer 1

应用组件

import React from "react";
import { Switch, Route } from "react-router-dom";
import Images from "./app/components/Images";
import Search from "./app/components/Search";
import UserProfile from "./app/components/UserProfile";

import "./App.css";

function App() {
  return (
    <>
      <Search />
      <Images />
      <Switch>  
        <Route path="/userProfile/:username">
          <UserProfile />
        </Route>
      </Switch>
    </>
  );
}

export default App;

搜索结果组件

import React from "react";
import { Link } from "react-router-dom";

const SearchResults = (props) => {
  const { results } = props.results.searches;

  const handleClick = (result, e) => {
    e.preventDefault();
    props.getUser(result.username);
  };
  return (
    <>
      {results &&
        results.map((result, id) => {
          return (
            <div key={id}>
                <Link to={`/userProfile/${result.username}`}>
                  {result.username}
                </Link>
            </div>
          );
        })}
    </>
  );
};


export default SearchResults;

用户配置文件组件

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { getUserAction } from "../actions/getUserAction";

const UserProfile = props => {
  
   useEffect(() => {
      props.getUserAction(props.match.params.username)
   },[])

   console.log(props)
    return (
        <div>
          {props.user
            ? <div>{user.username}</div>
            : <div>Loading...</div>
          }
        </div>
    );
}

const mapStateToProps = state => {
    return {
        user: state.users 
    }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getUser: (query) => dispatch(getUserAction(query)),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);

编辑：将参数添加到您的链接并删除 onclick。更新 Route 以期望一个 :username 参数。您可以通过 UserProfile 组件中的 props 访问参数。

确保在挂载 UserProfile 组件时执行操作或访问状态，以便在渲染时获得一些数据。

编辑 2：添加了 UserProfile 组件来回答。您想在组件安装时调度您的操作。此外，如果 state.user 未完成获取，请设置一个三元组以显示“正在加载...”。