React material-ui 导航另一个 html 页面并在其中渲染一个初始组件答案

【问题标题】：React material-ui navigate another html page and render an initial component in itReact material-ui 导航另一个 html 页面并在其中渲染一个初始组件
【发布时间】：2020-12-15 17:30:52
【问题描述】：

我正在使用 material-ui (https://material-ui.com/) 设计一个网站。我有带按钮的工具栏。像往常一样，当我单击其中一个按钮并为新的 html 页面呈现初始组件时，我想导航另一个 html 页面。例如，从“Main Page”（目前，它的 localhost:3000/）到“About”页面（localhost:3000/About）。

我尝试了类似的方法，

 import { Link } from 'react-router-dom';
    
    function ListItemLink(props) {
      const { icon, primary, to } = props;
    
      const CustomLink = props => <Link to={'/About'} {...props} />;
    
      return (
          <Button component={CustomLink} /> About              
      );
    }

https://github.com/mui-org/material-ui/issues/10955 但它不起作用。我搜索了许多其他方法，但它们都没有做我想要的。在下图中，我在公共文件夹下有“关于”和“新闻”文件夹。它们每个都有自己的 index.html 文件。而且我在 src 文件夹下也有 'index.js'。

默认情况下，nmp 在 'public' 文件夹下启动 index.html 并为此 html 文件执行 index.js。当我通过按钮单击路由其他文件夹时，我想制作这种场景。

有没有更好的方法来做到这一点？

谢谢。

【问题讨论】：

标签： javascript reactjs react-router material-ui react-router-dom

【解决方案1】：

我建议阅读 React Router 的文档。

https://reactrouter.com/web/guides/quick-start

在下面的代码中，Switch 组件是用来根据它下面的Route 组件来查看应该渲染什么的。

您需要此开关逻辑设置，否则您的按钮将无法执行任何操作。

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

【讨论】：