[英]Stateless component React router
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. 我是React和Redux的新手,我实际上正在创建一个自己的代码,但我在无状态组件中遇到了路由器类的问题。
So, Actually I need to route to a component by using this.props.history.push('/somepath'). 所以,实际上我需要使用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 我在另一个像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 我的主文件index.js看起来像这样
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 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({});
Hope this doesn't come in too late. 希望这不会太迟。 I successfully could redirect from a stateful component but I wanted to convert my component to a stateless component since the only thing that made it stateful was the redirect bit.
我成功地可以从有状态组件重定向,但我想将我的组件转换为无状态组件,因为唯一使其成为有状态的是重定向位。 I'm fairly new to react and most of the resources out there were not as clear.
我很反应,大部分资源都不那么明确。 This is how I went about it.
这就是我的方式。
import React from "react"; // eslint-disable-line no-unused-vars
import "bootstrap/dist/css/bootstrap.min.css";
import "./header.css";
const Header = (props) => {
return (
<div className = "header">
<h1 onClick = {props.history.push('/some-path')}>{props.headerText}</h1>
</div>
);
}
export default Header;
It worked for me by using withRouter, (plus ignoring typescript warning): 它通过使用withRouter(加上忽略打字稿警告)对我有用:
import { withRouter } from 'react-router-dom';
...
type Props = { myProp: boolean };
// @ts-ignore
export const MyComponent: FC<Props> = withRouter(({ myProp, history }) => {
...
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.