Задача 3153

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

Задача 3153

BogdanVozniy

Задача

В папке routes есть два компонента: Main и About.

Для каждого компонента добавьте ссылку, которая приведет пользователя к другому роуту.

Для роута Main ссылка должна быть Read about react-router-dom, и она должна вести пользователя на роут About.

Для роута About ссылка должна быть Back to main, и она должна вести пользователя на роут Main.

Ничего не меняйте внутри компонента App, Main или About.

import React from "react";
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
import Main from "./routes/Main";
import About from "./routes/About";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Main}>
          <Link to="/about">Read about react-router-dom</Link>
        </Route>
        <Route path="/about" component={About}>
          <Link to="/">Back to main</Link>
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;


export default function Main() {
    return (
        <div>
            <h2>React router</h2>
            <p>Most modern React projects manage their dependencies using a package manager like npm or Yarn. To add React Router to an existing project, the first thing you should do is install the necessary dependencies with the tool of your choice</p>
        </div>
    );
};


export default function About() {
    return (
        <div>
            <h4>LEARN ONCE, ROUTE ANYWHERE</h4>
            <h2>REACT ROUTER</h2>
            <p>Components are the heart of React's powerful, declarative programming model. React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering--so take your pick!</p>
        </div>
    );
};

Подскажите что и где нужно сделать чтобы закончить задачу ?

Компонент App должен рендерить компонент Main для пути /
Компонент App должен рендерить компонент About для пути /about

3. У компонента Main должна быть ссылка с текстом Read about react-router-dom

Нажатие на Link на пути / должно перенести пользователя с роута Main на About

5. У компонента About должна быть ссылка с текстом Back to main

Нажатие на Link на пути /about должно перенести пользователя с роута About на Main

задача проходит проверки 3 и 5

Coderslang_Master

BogdanVozniy нужно добавить компоненты <Link> в Main и About. Сейчас ты их добавил снаружи.

App должен выглядеть так:

        <BrowserRouter>
            <Switch>
                <Route exact path='/' component={Main} />
                <Route path='/about' component={About} />
            </Switch>
        </BrowserRouter>

BogdanVozniy

Coderslang_Master


import { Link } from "react-router-dom";
export default function About() {
  return (
    <>
      <div>
        <h4>LEARN ONCE, ROUTE ANYWHERE</h4>
        <h2>REACT ROUTER</h2>
        <p>
          Components are the heart of React's powerful, declarative programming
          model. React Router is a collection of navigational components that
          compose declaratively with your application. Whether you want to have
          bookmarkable URLs for your web app or a composable way to navigate in
          React Native, React Router works wherever React is rendering--so take
          your pick!
        </p>
      </div>
      <Link to="/">Back to main</Link>
    </>
  );
}

Main


import { Link } from "react-router-dom";
export default function Main() {
  return (
    <>
      <div>
        <h2>React router</h2>
        <p>
          Most modern React projects manage their dependencies using a package
          manager like npm or Yarn. To add React Router to an existing project,
          the first thing you should do is install the necessary dependencies
          with the tool of your choice
        </p>
      </div>
      <Link to="/about">Read about react-router-dom</Link>
    </>
  );
}

все ответы красные , так тоже не работает

Coderslang_Master

BogdanVozniy перенеси линки внутрь div

BogdanVozniy

Coderslang_Master перенес, пробовал ставить их в начале и в конце div - результат - все проверки красные

BogdanVozniy

import { Link } from "react-router-dom";
export default function About() {
  return (
    <div>
      <h4>LEARN ONCE, ROUTE ANYWHERE</h4>
      <h2>REACT ROUTER</h2>
      <p>
        Components are the heart of React's powerful, declarative programming
        model. React Router is a collection of navigational components that
        compose declaratively with your application. Whether you want to have
        bookmarkable URLs for your web app or a composable way to navigate in
        React Native, React Router works wherever React is rendering--so take
        your pick!
      </p>
      <Link to="/">Back to main</Link>
    </div>
  );
}


import { Link } from "react-router-dom";
export default function Main() {
  return (
    <div>
      <h2>React router</h2>
      <p>
        Most modern React projects manage their dependencies using a package
        manager like npm or Yarn. To add React Router to an existing project,
        the first thing you should do is install the necessary dependencies with
        the tool of your choice
      </p>
      <Link to="/about">Read about react-router-dom</Link>
    </div>
  );
}


import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Main from "./routes/Main";
import About from "./routes/About";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Coderslang_Master

BogdanVozniy добавь import React from 'react';