React Router V4 - Маршрут между компонентами, а не целая страница

Question

Я изучаю React with React Router V4. У меня есть изображение здесь, которые могли бы объяснить, что я хотел бы сделать:

1. Щелкните кнопку «Далее»
2. Отправить нажмите событие для компонента A («кнопка получил щелкнул»)
3. Нажатие кнопки «Далее» будет также замените «Компонент B» на «Компонент C», сохраняя при этом все на странице.
4. После этого можно перейти на совершенно другую страницу с различными компонентами.

У меня очень тяжелое время, выясняя маршрутизацию и структуру, чтобы иметь возможность справиться с этим.

Спасибо за помощь.

Я делаю то, что я пытаюсь сделать здесь, это нормально или это странно и не рекомендуется.

Что я пробовал:

1. Я попытался оставить компонент А внутри маршрутизатора поверх всего - это работает, пока вы идете на страницу 3, потому что я не могу удалить Это.

2. Я пытался реализовать что-то похожее на пример React Router v4 на подтемах. В основном создание родительского компонента, содержащего компонент A и под ним, имеет два < Match />, один для компонента B, а другой для компонента C. Это тоже не сработало, и я, вероятно, что-то очень неправильно делаю здесь. https://react-router.now.sh/basic

3. Я также прошу прочесть много учебников, но они все разные версии React и React Router. Я думал, что это было просто, но уже неделю ударяю головой, без каких-либо успехов.

Answer 1

Возможно, что-то подобное поможет вам выполнить вашу задачу.

... 

const ComponentA = ({children}) => { 
    return (
     <div> 
      <div>COMPONENT A</div> 
      {children} 
     </div> 
    ) 
} 

<Route path={/} component={SomeWrapper}> 
    <Route path={/doubled} component={ComponentA}> 
     <Route path={/b} component={ComponentB} /> 
     <Route path={/c} component={ComponentC} /> 
    </Route> 
    <Route path={/single} component={ComponentZ} /> 
</Route> 

Answer 2

Хорошо, я, наконец, понял это - возможно, это не так, как правильно или идеально, но, похоже, он работает. Я напишу здесь код о том, как я структурировал маршрутизацию и мои компоненты. Помните, что это использование реактивного маршрутизатора v4, и все немного отличается от предыдущих версий.

//Router file - index.js 
//import React, BrowserRouter, React Dom, Header and Components A, B and C parent 
//Create Root component, add BrowserRouter and add a subpath for browserRouter - needed for the nested routes 
//Root component renders inside HTML element with an ID of main 
//Have a Match for '/' (it will actually be to "/subpath")- then it renders Parent of ABC 
import React from 'react'; 
import { render } from 'react-dom';//instead of importing ALL react dom we just import the render 
//React Router V4 uses Match and Miss - if something Matches a path it will render the assigned component and you use Miss for a 404/not found page 
import { BrowserRouter, Match, Miss } from 'react-router'; 

import Header from './components/Header'; 
import ComponentABCParent from './components/ComponentABCParent'; 


const Root =() => { 
    return (
     <BrowserRouter basename="/subpathHere"> 
      <div> 
       <div id="header"> 
        <Header /> 
       </div> 

       <div className="app-content"> 

        <Match pattern="/" component={ComponentABCParent}/> 
        <Miss component={NotFound} /> 

       </div> 
      </div> 
     </BrowserRouter> 
    ) 
} 

render(<Root/>, document.getElementById('main')); 


//Parent of A, B and C with nested route 
//Create parent component - place inside ComponentA and two Match's 
//One Match for Component B which is rendered immediately 
//Second Match for ComponentC 

import React from 'react'; 
import {Link, Match, Miss} from 'react-router'; 
import OracleCircle from './ComponentA'; 
import Intro from './ComponentB'; 
import StepOne from './ComponentC'; 


const ComponentABCParent = ({ pathname }) => { 

    return (

     <div> 
      <ComponentA /> 
      <Match exactly pattern={`${pathname}`} component={ComponentB} /> 
      <Match pattern={`${pathname}component-c`} component={ComponentC}/> 

     </div> 

    ); 

} 

export default ComponentABCParent; 




//Component B - ComponentB.js 
//Inside ComponentB I have a Link that points to ComponentC 
import React from 'react'; 
import {Link} from 'react-router'; 

const ComponentB = ({pathname}) => { 

    return (
     <div> 
      <h1>"Stack Overflow is not a tutorial website"</h1> 

      <Link to={`${pathname}component-c`}>Go to C</Link> 
     </div> 
    ); 

} 

export default ComponentB; 



//Component C - ComponentC.js 
//Render ComponentC with funny answer 
import React from 'react'; 
import {Link} from 'react-router'; 

const ComponentA = ({pathname}) => { 

    return (
     <div> 
      <h1>"Your Momma is a tutorial website"</h1> 
     </div> 
    ); 

} 

export default ComponentA; 

Надеется, что это помогает