javascript - React Router V4 - 在组件之间而不是整个页面之间路由

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 3 年前。

Improve this question

我正在使用 React Router V4 学习 React。我这里有一张图片可以解释我想做的事情:

1. 点击“下一步”按钮
2. 向组件 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 Router。我以为这很简单，但我已经绞尽脑汁一周了，没有任何进展。

Answer 1

好吧，我终于想通了 - 也许不是正确/完美的方式，但它似乎有效。我将在这里编写有关如何构建路由和组件的代码。请记住，这是使用 React Router 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;

希望这有帮助