Блог

Я разрабатываю веб-сайт с использованием material-ui (https://material-ui.com /). У меня есть панель инструментов с кнопками. Как обычно, я хочу перейти на другую HTML-страницу, когда нажимаю одну из кнопок и отображаю начальный компонент для новой HTML-страницы. Например, с «Главной страницы» (на данный момент, ее localhost: 3000/) на страницу «О программе» (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 но это не сработало. Я искал много других методов, но ни один из них не делает то, что я хочу. На рисунке ниже у меня есть папки «About» и «News» в общедоступной папке. У каждого из них есть свой собственный index.html файл. И у меня также есть ‘index.js ‘ в папке src.

По умолчанию запускается nmp index.html в папке «public» и выполните index.js для этого HTML-файла. Я хочу создать этот сценарий, когда я маршрутизирую другие папки нажатием кнопки.

Есть ли какой-либо предпочтительный способ сделать это?

Спасибо.

Я рекомендую прочитать документацию для 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>
  );
}