React Router：单击链接/按钮时如何重定向到不同的组件？

Question

最近刚开始学习网络开发，所以请原谅我可能很幼稚的问题。

我见过很多使用<Link>和<Route>来更新页面的例子。 但是，大多数包含链接所在的固定导航栏，组件本身只有 static 内容。

如果链接/按钮位于子组件内，我还不清楚如何正确更新页面。 例如，给定一个容器：

<div id='container'><h1>components should be rendered in here, but only 1 at a time.</h1></div>

和 2 个组件，C1 和 C2：

class C1 extends React.Component {
    /*other functions*/
    render() {
        return(
            <div>
                <p>Other things</p>
                <Button>Click me to Redirect to C2!</Button>
            </ div>
        )
    }
}

class C2 extends React.Component {
    /*other functions*/
    render() {
        return(
            <div>
                <p>Other things</p>
                <a>Click me to Redirect to C1!</a>
                <p>Other things</p>
            </ div>
        )
    }
}

假设这两个组件将在“容器”div 下呈现，C1 是默认组件。 我应该如何设置 react-router 以在 C1 和 C2 之间导航，理论上用于两个以上的组件？

Answer 1

react-router和react-router-dom是两个互补的库，可帮助您使用浏览器历史记录 api 使用Javascript 历史记录 ZEFE90A8E6004A7C8743下的 ZEFE90A8E6004A7C8743。

要实现你想要的，你应该在react-router-dom中使用BrowserRouter 、 Switch和Route组件。 BrowserRouter充当其某些实用程序的子级以及历史记录所在的当前位置（当前主机名、路径名、queryParams 等）的提供者，而Switch和Route则通过Route作为将您想要的路径与 React 绑定的组件一起工作渲染和Switch组件检查其所有子Route和渲染第一个与历史记录具有的当前路径名匹配的组件，您可以添加不带path道具的Route以便Switch回退到它以防当前历史记录位置不匹配。

一个例子是这样的

import React from 'react'
import {BrowserRouter, Switch, Route} from 'react-router-dom'
import C1 from './C1'
import C2 from './C2'

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div id="container">
            <BrowserRouter>
                <Switch>
                    <Route path="/view1" component={C1}/>
                    <Route path="/view2" component={C2}/>
                    <Route component={C1} />
                </Switch>
            </BrowserRouter>
        </div>;
    }
}

现在，有多种方法可以浏览声明的页面。 一种是直接使用Link组件并使用“to”道具将您想要的路径名传递给 go。

class C2 extends React.Component {
    /*other functions*/
    render() {
        return(
            <div>
                <p>Other things</p>
                <Link to="/view1">Click me to Redirect to C1!</Link>
                <p>Other things</p>
            </ div>
        )
    }
}

Link实际上使用您通过to属性提供的href呈现锚点。

另一种导航方法是使用历史 api ，它在从 Route 渲染时作为道具注入。 这允许您在实际设置新位置之前添加更多逻辑。 这是一个简单的例子

class C2 extends React.Component {
    /*other functions*/
    redirectToC1(){
        // do some extra logic you may want
        this.props.history.push("/view1")
    }
    render() {
        return(
            <div>
                <p>Other things</p>
                <a onClick={() => this.redirectToC1()}>Click me to Redirect to C1!</a>
                <p>Other things</p>
            </ div>
        )
    }
}

请务必深入了解文档以查看更多信息。

Answer 2

您可以将组件作为函数调用，例如：

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            isActive: true
        };
    }
    C1 = () => {
        return <h1>C1</h1>;
    };
    C2 = () => {
        return <h1>C2</h1>;
    };
    render() {
        return <div id="container">{this.state.isActive ? this.C1 : this.C2}</div>;
    }
}

上面的例子没有使用任何路由器。 您可以在此处查看如何安装和使用反应导航的文档： https://reactnavigation.org/docs/hello-react-navigation

Answer 3

你可以使用 Scrollintoview 你可以查看我制作的这个小演示以供参考演示

这个stackoverflow也很有用