Как правильно маршрутизировать страницы на ReactJS с помощью React Router Dom - PullRequest
Новая
       72

Как правильно маршрутизировать страницы на ReactJS с помощью React Router Dom

0 голосов
/ 13 июля 2020

Я пытаюсь перенаправить свои страницы ... но когда я копирую URL-ссылку со страницы и хочу показать другим людям ... Они видят, что страница 404 не найдена ..

Я использую этот простой код Реагировать: 

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>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

У меня больше страниц .. но когда я копирую / вставляю URL-адрес без некоторых страниц, отображается. Как я могу это исправить?

1 Ответ

0 голосов
/ 13 июля 2020

это зависит от используемой версии маршрутизатора. пример для версии 4. Я создаю код https://codepen.io/romanown/pen/ZEQjrXm, и он работает. изменен на работу с кодом, когда я go на ярлыки меню. но переход по веб-адресу не работал с кодом. для этого нужен реальный локальный или сетевой сервер или хостинг. поставившие минус хоть напишите за что.

html

<div id="app"></div>

js

const {
  BrowserRouter,
  Switch,
  Route,
  Link
} = ReactRouterDOM

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}
const App = () => (
<BrowserRouter>
  <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>
    <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
  </div>
</BrowserRouter>
)
ReactDOM.render((
    <App />
), document.getElementById('root'))
...