无状态组件 React 路由器 [英] Stateless component React router

问题描述

我是 React 和 Redux 的新手，实际上我正在创建自己的代码，但我在无状态组件中遇到了类似路由器的问题.

所以，实际上我需要使用 this.props.history.push('/somepath') 路由到一个组件.这不会发生在无状态组件内部.

我的无状态组件是

从react"导入React；//eslint-disable-line no-unused-vars导入bootstrap/dist/css/bootstrap.min.css"；导入./header.css"；const 标题 = () =>({句柄作者(){this.props.history('/somepath')//这不起作用},使成为(){返回 (<div className = "header"><h1 onClick = {this.handleAuthor.bind(this)}>{this.props.headerText}</h1>

);}});导出默认标题；

我在另一个像 mainlayout 这样的无状态组件中调用它

从react"导入React；//eslint-disable-line no-unused-vars从../header/Header"导入标题；//eslint-disable-line no-unused-vars从../footer/Footer"导入页脚；//eslint-disable-line no-unused-vars导入./mainLayout.css"；const MainLayout = props =>({使成为() {返回 (<div className="应用程序"><Header headerText = "RK Boilerplate"/>
<main>{props.children}</main>
<页脚/>

);}});导出默认的 MainLayout；

我的主文件 index.js 看起来像这样

从react"导入React；//eslint-disable-line no-unused-vars从react-dom"导入 ReactDOM；//eslint-disable-line no-unused-varsimport { matchRoutes, renderRoutes } from "react-router-config";//eslint-disable-line no-unused-vars从react-router-dom"导入{路由器}；//eslint-disable-line no-unused-vars从反应路由器"导入{开关}；//eslint-disable-line no-unused-vars从react-redux"导入{提供者}；//eslint-disable-line no-unused-vars从./store"导入商店；//eslint-disable-line no-unused-vars从./routes"导入路由；//eslint-disable-line no-unused-vars从./components/mainLayout/MainLayout"导入 MainLayout；//eslint-disable-line no-unused-vars从history/createBrowserHistory"导入createHistory；让历史 = createHistory();const App = document.getElementById("app");导出默认应用程序；ReactDOM.render(<提供者商店={商店}><主布局><路由器历史= {历史}><开关>{renderRoutes(routes)}</开关></路由器></MainLayout></提供者>,应用程序);

所以我需要的是我必须从标头路由到另一个组件，该组件和路径在路由器文件中给出

router.js

从../containers/Home"导入Home；从../containers/About"导入关于；从../containers/CreateUser"导入 CreateUser；从../containers/Layout"导入布局；const 路由 = [{ 小路: "/"，准确:真实，组件:布局},{ 路径:/home"，准确:真实，组件:首页},{路径:"/关于",准确:真实，组件:关于},{路径:"/createUser",准确:真实，组件:创建用户}];导出默认路由；

当我尝试从标头路由时，出现了类似 push of undefined 的错误.我是否遗漏了什么我应该在这里做的任何改变.

提前致谢.

解决方案

您可以直接导入历史对象并从中推送.例如尝试下面的代码.

从react"导入React；//eslint-disable-line no-unused-vars导入bootstrap/dist/css/bootstrap.min.css"；导入./header.css"；从/your/history/path"导入历史记录//试试这个const 标题 = () =>({句柄作者(){history.push('/somepath')//改成这个},使成为(){返回 (<div className = "header"><h1 onClick = {this.handleAuthor.bind(this)}>{this.props.headerText}</h1>

);}});导出默认标题；

创建如下浏览器历史记录，并通过导入在任何地方使用它.

import createBrowserHistory from 'history/createBrowserHistory';导出默认 createBrowserHistory({});

I am new to React and Redux, I am actually creating a code of myself but I got stuck with a router kind of thing inside stateless component.

So, Actually I need to route to a component by using this.props.history.push('/somepath'). This is not happening inside a stateless component.

My Stateless component is

import React from "react"; // eslint-disable-line no-unused-vars
import "bootstrap/dist/css/bootstrap.min.css";
import "./header.css";

const Header = () => ({

    handleAuthor() {
        this.props.history('/somepath')// this is not working
    },

    render(){
        return (
            <div className = "header">
                <h1 onClick = {this.handleAuthor.bind(this)}>{this.props.headerText}</h1>
            </div>
        );
    } 
});

export default Header;

I am calling this inside another stateless component like mainlayout

import React from "react"; // eslint-disable-line no-unused-vars
import Header from "../header/Header"; // eslint-disable-line no-unused-vars
import Footer from "../footer/Footer"; // eslint-disable-line no-unused-vars
import "./mainLayout.css";

const MainLayout = props => ({
    render() {
        return (
            <div className="App">
                <Header headerText = "RK Boilerplate"/>
                <div className = "mainLayout">
                    <main>{props.children}</main>
                </div>
                <Footer />
            </div>
        );
    }
});

export default MainLayout;

My main file index.js looks like this

import React from "react"; // eslint-disable-line no-unused-vars
import ReactDOM from "react-dom"; // eslint-disable-line no-unused-vars
import { matchRoutes, renderRoutes } from "react-router-config"; // eslint-disable-line no-unused-vars
import { Router } from "react-router-dom"; // eslint-disable-line no-unused-vars
import { Switch } from "react-router"; // eslint-disable-line no-unused-vars
import { Provider } from "react-redux"; // eslint-disable-line no-unused-vars
import store from "./store"; // eslint-disable-line no-unused-vars
import routes from "./routes"; // eslint-disable-line no-unused-vars
import MainLayout from "./components/mainLayout/MainLayout"; // eslint-disable-line no-unused-vars

import createHistory from "history/createBrowserHistory";
let history = createHistory();
const App =  document.getElementById("app");

export default App;

ReactDOM.render(
    <Provider store={store}>
        <MainLayout>
            <Router history= {history}>
                <Switch>
                    {renderRoutes(routes)}
                </Switch>
            </Router>
        </MainLayout>                 
    </Provider>, 
    App);

SO what i need is I have to route from the header to another component where this component and path is given in a router file

router.js

import Home from "../containers/Home";
import About from "../containers/About";
import CreateUser from "../containers/CreateUser";

import Layout from "../containers/Layout";

const routes = [
    { path: "/",
        exact: true,
        component: Layout
    },
    { path: "/home",
        exact: true,
        component: Home
    },
    {
        path:"/About",
        exact: true,
        component: About
    },
    {
        path:"/createUser",
        exact: true,
        component: CreateUser
    }
];

export default routes;

I got an error like push of undefined , when i tried to route from header. Am I missing something is there any change that i should do here.

Thanks in advance.

解决方案

You can directly import the history object and push from that. For example try below code.

import React from "react"; // eslint-disable-line no-unused-vars
import "bootstrap/dist/css/bootstrap.min.css";
import "./header.css";
import history from "/your/history/path" //try this

const Header = () => ({

    handleAuthor() {
        history.push('/somepath')// change to this
    },

    render(){
        return (
            <div className = "header">
                <h1 onClick = {this.handleAuthor.bind(this)}>{this.props.headerText}</h1>
            </div>
        );
    } 
});

export default Header;

Create browser history like below and use it every where by importing.

import createBrowserHistory from 'history/createBrowserHistory';

export default createBrowserHistory({});

这篇关于无状态组件 React 路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！