React路由器V4 - 组件之间的路由而不是整个页面

Question

我正在学习React与路由器V4。我有一个形象在这里可以解释我想要做什么：

1. 单击“下一步”按钮
2. 发送Click事件组件A（“按钮，得到了点击”）
3. 单击“下一步”会还可以将“组件B”与“组件C”交换，同时保持页面上的所有内容一致。
4. 完成此操作后，能够导航到具有不同组件的完全不同的页面。

我真的很难搞清楚路由和结构能够处理这个问题。

感谢您的帮助。

我在这里试图完成的是正常的还是这个奇怪的，不推荐。

我的尝试：

1. 我试图对一切的顶部将成分A中的路由器内部 - 这工作，直到你去3页，因为那时我无法删除它。

2. 我一直在试图在子主题上实现类似于React Router v4的例子。基本上创建一个持有组件A并在它下面的父组件，它有两个< Match />，一个用于组件B，另一个用于组件C.这也没有奏效，我可能在这里做了非常错误的事情。 https://react-router.now.sh/basic

3. 我也一直在阅读很多教程，但他们都是React和React路由器的不同版本。我认为这很简单，但现在一直没有任何进展，我的脑袋已经敲了一个星期。

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; 

希望这有助于