React Router中动态生成链接列表的实现求助

Hey there! Let's work through how to turn that server-fetched nameArr array into clickable React Router links that map to your routes in route.js. I'll break this down step by step with code examples tailored to your setup:

1. Import the Right React Router Components #

First, make sure you're importing the Link component from react-router-dom (not just react-router—the dom package includes browser-specific tools like links and routers):

var React = require('react');
var { Link } = require('react-router-dom');

2. Manage Async Data with Component State #

Since your nameArr comes from a server response, you'll need to store it in component state and fetch the data when the component mounts. Here's how to do this with a class component (matching your require syntax):

class NameLinkList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nameArr: [] // Start with an empty array
    };
  }

  componentDidMount() {
    // Replace this with your actual API call to fetch names
    fetch('/api/get-names')
      .then(response => response.json())
      .then(data => {
        this.setState({ nameArr: data });
      })
      .catch(error => console.error('Failed to load names:', error));
  }

  render() {
    const { nameArr } = this.state;

    return (
      <div className="name-links-container">
        {/* Add a loading state for when data is still fetching */}
        {nameArr.length === 0 ? (
          <p>Loading your links...</p>
        ) : (
          // Map over the array to generate links
          nameArr.map((name, index) => (
            <Link
              key={index} {/* Use a unique key—prefer a unique ID over index if available */}
              to={`/${name}`} {/* Match this path to your route.js config */}
              style={{ margin: '0 10px', textDecoration: 'none' }}
            >
              {name}
            </Link>
          ))
        )}
      </div>
    );
  }
}

module.exports = NameLinkList;

If you prefer using function components (still compatible with require), here's the equivalent with hooks:

var React = require('react');
var { Link } = require('react-router-dom');
var { useState, useEffect } = React;

function NameLinkList() {
  const [nameArr, setNameArr] = useState([]);

  useEffect(() => {
    fetch('/api/get-names')
      .then(res => res.json())
      .then(data => setNameArr(data))
      .catch(err => console.error('Error fetching names:', err));
  }, []);

  return (
    <div>
      {nameArr.length === 0 ? (
        <p>Loading...</p>
      ) : (
        nameArr.map((name, idx) => (
          <Link
            key={idx}
            to={`/your-prefix/${name}`} {/* Adjust the path to match route.js */}
            className="nav-link"
          >
            {name}
          </Link>
        ))
      )}
    </div>
  );
}

module.exports = NameLinkList;

3. Match Links to Your route.js Config #

Your route.js needs to have routes that correspond to the paths you're using in the Link components. There are two common scenarios:

Scenario 1: Dynamic Route for All Names #

If all names use the same component (e.g., a page that displays details based on the name), use a dynamic route parameter:

var { Route, Switch } = require('react-router-dom');
var Home = require('./Home');
var NameDetails = require('./NameDetails'); // Reusable component for all names

const routes = (
  <Switch>
    <Route exact path="/" component={Home} />
    {/* Dynamic route that matches any path like "/apple", "/banana", etc. */}
    <Route path="/:name" component={NameDetails} />
  </Switch>
);

module.exports = routes;

In the NameDetails component, you can access the name via this.props.match.params.name (class component) or useParams() (function component).

Scenario 2: Individual Routes for Each Name #

If each name maps to a unique component, define explicit routes:

var { Route, Switch } = require('react-router-dom');
var Home = require('./Home');
var ApplePage = require('./ApplePage');
var BananaPage = require('./BananaPage');

const routes = (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/apple" component={ApplePage} />
    <Route path="/banana" component={BananaPage} />
    {/* Add more routes for other names in your array */}
  </Switch>
);

module.exports = routes;

Just make sure the to value in your Link exactly matches the path in these routes (e.g., to="/apple" for the "apple" array element).

4. Key Tips to Avoid Issues #

• Unique Keys: Always include a key prop when mapping over arrays in React. If your server returns unique IDs for each name, use those instead of index for better performance.
• Path Matching: Double-check that the to path in your Link matches the path in your route config—even small typos (like missing slashes) will break navigation.
• Error Handling: Add error states for failed API calls (e.g., show a message like "Failed to load links" instead of just an empty page).

内容的提问来源于stack exchange，提问作者MVG