使用React路由实现页面导航的示例代码

npm install react-router-dom

// src/Home.js
import React from 'react';

const Home = () => {
  return <h1>欢迎来到主页！</h1>;
};

export default Home;

// src/About.js
import React from 'react';

const About = () => {
  return <h1>关于我们</h1>;
};

export default About;

// src/Contact.js
import React from 'react';

const Contact = () => {
  return <h1>联系我们</h1>;
};

export default Contact;

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">主页</Link></li>
            <li><Link to="/about">关于我们</Link></li>
            <li><Link to="/contact">联系我们</Link></li>
          </ul>
        </nav>
        
        {/* 使用Switch来确保一次只有一个Route被渲染 */}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

npm start

// src/User.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';

const User = ({ match }) => {
  return (
    <div>
      <h2>用户页面</h2>
      <ul>
        <li><Link to={`${match.url}/profile`}>个人资料</Link></li>
        <li><Link to={`${match.url}/settings`}>设置</Link></li>
      </ul>

      <Switch>
        <Route path={`${match.path}/profile`} component={UserProfile} />
        <Route path={`${match.path}/settings`} component={UserSettings} />
      </Switch>
    </div>
  );
};

const UserProfile = () => {
  return <h3>用户个人资料</h3>;
};

const UserSettings = () => {
  return <h3>用户设置</h3>;
};

export default User;

// src/App.js
import User from './User';

// 在Switch内部添加User的路由
<Route path="/user" component={User} />

// src/User.js
const User = ({ match }) => {
  return (
    <div>
      <h2>用户页面</h2>
      <ul>
        <li><Link to={`${match.url}/1`}>用户1</Link></li>
        <li><Link to={`${match.url}/2`}>用户2</Link></li>
      </ul>
      
      <Switch>
        <Route path={`${match.path}/:userId`} component={UserDetail} />
      </Switch>
    </div>
  );
};

// 用户详情组件
const UserDetail = ({ match }) => {
  return <h3>用户ID: {match.params.userId}</h3>;
};