使用react router，我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo（…）。
我想做导航。不是来自链接，而是来自下拉选择（例如）。我如何在代码中执行此操作？this.context是什么？
我看到了导航混合，但我可以在没有混合的情况下这样做吗？
当前回答
在写作时，正确的答案适合我
this.context.router.history.push('/');
但您需要将PropTypes添加到组件中
Header.contextTypes = {
router: PropTypes.object.isRequired
}
export default Header;
不要忘记导入PropTypes
import PropTypes from 'prop-types';
其他回答
这可能不是最好的方法，但。。。使用react router v4，下面的TypeScript代码可以为一些人提供一些想法。
在下面的渲染组件（例如LoginPage）中，可以访问router对象，只需调用router.transitionTo（'/home'）即可导航。
导航代码取自。
“react router”：“^4.0.0-2”，“反应”：“^15.3.1”，
从“react Router/BrowserRouter”导入路由器；从“react History/BrowserHistory”导入｛History｝；从“history/createBrowserHistory”导入createHistory；consthistory=createHistory（）；接口MatchWithPropsInterface{component:React.component的类型，router:路由器，历史：历史，确切地？：任何图案：字符串}类MatchWithProps扩展React.Component＜MatchWithPropsInterface，any＞{render（）{返回(<Match｛…this.props｝render={（matchProps）=>(React.createElement（this.props.component，this.props）)}/>)}}ReactDOM.渲染(<路由器>｛（｛路由器｝）=>(＜div＞<MatchWithProps justly pattern=“/”component=｛LoginPage｝router=｛router｝history=｛history｝/>＜MatchWithProps pattern＝“/login”component＝｛LoginPage｝router＝｛router｝history＝｛history｝/＞<MatchWithProps pattern=“/home”component=｛homepage｝router=｛router｝history=｛history｝/>＜缺少组件＝｛NotFoundView｝/＞</div>)}</路由器>，document.getElementById（'app'）);
随着React Router v4即将推出，现在有了一种新的实现方式。
import { MemoryRouter, BrowserRouter } from 'react-router';
const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;
<Router location="/page-to-go-to"/>
react lego是一个示例应用程序，展示了如何使用/更新react router，它包括导航应用程序的示例功能测试。
布局/BaseLayout.jsx
import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";
const BaseLayout = () => {
return(
<div>
<Navbar/>
<Outlet/>
</div>
)
}
export default BaseLayout
路由器/index.jsx
import { createBrowserRouter} from "react-router-dom";
import BaseLayout from "../layouts/BaseLayout";
import HomePage from "../views/HomePage";
import Menu from "../components/Menu"
import Detail from "../components/Detail";
const router = createBrowserRouter([
{
element: <BaseLayout/>,
children:[
{
path: "/",
element: <Menu />,
},
{
path: '/:id',
element: <Detail/>
}
]
},
])
export default router
存储/actionType.js
export const FETCH_DATA_FOODS = "food/setFood"
export const FETCH_DATA_FOODS_DETAILS = "food/setDetailFood"
存储/还原器/还原器.js
import { FETCH_DATA_FOODS, FETCH_DATA_FOODS_DETAILS } from "../actionType";
const initialState = {
foods:[],
detailFood:{}
};
const foodReducer = (state = initialState, action) => {
switch(action.type){
case FETCH_DATA_FOODS:
return{
...state,
foods: action.payload
}
case FETCH_DATA_FOODS_DETAILS:
return{
...state,
detailFood: action.payload
}
default:
return state
}
}
export default foodReducer
存储/actionCreator
import { FETCH_DATA_FOODS, FETCH_DATA_FOODS_DETAILS } from "./actionType";
// import { FETCH_DATA_FOODS } from "../actionType";
export const actionFoodSetFoods = (payload) => {
return {
type: FETCH_DATA_FOODS,
payload,
};
};
export const actionDetailSetDetailFood = (payload) => {
return {
type: FETCH_DATA_FOODS_DETAILS,
payload,
};
};
export const fetchDataFoods = () => {
return (dispatch, getState) => {
fetch("https://maxxkafe.foxhub.space/users")
.then((response) => {
if (!response.ok) {
throw new Error("notOk");
}
return response.json();
})
.then((data) => {
// dispatcher({
// type: "food/setFood",
// payload: data
// })
dispatch(actionFoodSetFoods(data));
});
};
};
export const fetchDetailDataFood = (id) => {
return (dispatch, getState) => {
console.log(id);
fetch(`https://maxxkafe.foxhub.space/users/${id}`)
.then((response) => {
if (!response.ok) {
throw new Error("gaOkNich");
}
console.log(response, ",,,,,,,,");
return response.json();
})
.then((data) => {
dispatch(actionDetailSetDetailFood(data));
});
};
};
stores/index.js
import { legacy_createStore as createStore, combineReducers, applyMiddleware } from 'redux'
import foodReducer from './reducers/foodReducer'
import thunk from "redux-thunk"
const rootReducer = combineReducers({
foods: foodReducer
});
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store
应用程序.js
import { RouterProvider } from "react-router-dom";
import router from "./routers";
import { Provider } from "react-redux";
import store from "./stores";
const App = () => {
return (
<Provider store={store}>
<RouterProvider router={router} />
</Provider>
);
};
export default App;
组件/类别.jsx
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { fetchDataCategories } from "../stores/actionCreate";
import RowCategory from "../views/rowTableCategory";
const Category = () => {
// const [categories, setCategories] = useState([])
const { categories } = useSelector((state) => state.categories);
const dispatcher = useDispatch();
useEffect(() => {
// fetch("http://localhost:3003/categories")
// .then((response) => {
// if(!response.ok){
// throw new Error ("gaOkNich")
// }
// return response.json()
// })
// .then((data) => {
// setCategories(data)
// })
dispatcher(fetchDataCategories());
}, []);
return (
<section className="mt-12">
<div className="flex mr-20 mb-4">
<Link to={'/add-Form'} className="flex ml-auto text-white bg-red-500 border-0 py-2 px-6 focus:outline-none hover:bg-red-600 rounded">
Create Category
</Link>
</div>
<div className="overflow-hidden rounded-lg border border-gray-200 shadow-md m-5">
<table className="w-full border-collapse bg-white text-left text-sm text-gray-500">
<thead className="bg-gray-50">
<tr>
<th scope="col" className="px-6 py-4 font-medium text-gray-900">
Name
</th>
<th scope="col" className="px-6 py-4 font-medium text-gray-900">
Created At
</th>
<th scope="col" className="px-6 py-4 font-medium text-gray-900">
Updated At
</th>
<th
scope="col"
className="px-6 py-4 font-medium text-gray-900"
></th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100 border-t border-gray-100">
{categories.map((el) => {
return <RowCategory key={el.id} el={el} />;
})}
</tbody>
</table>
</div>
</section>
);
};
export default Category;
组件/login.jsx
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { fetchDataFoods, login } from "../stores/actionCreate";
const Login = () => {
const input = {
email: "",
password: "",
};
const [values, setValues] = useState(input);
// const [password, setPassword] = useState('')
// const {admin} = useSelector((state) => state.admin)
const dispatcher = useDispatch();
const movePage = useNavigate();
const handleChange = (event) => {
const { name, value } = event.target;
setValues({
...values,
[name]: value,
});
console.log(value);
};
const handleLogin = async (event) => {
event.preventDefault();
try {
await dispatcher(login(values));
await dispatcher(fetchDataFoods());
movePage("/home");
} catch (error) {
console.log(error);
}
};
return (
<section className="font-mono bg-white-400 mt-[10rem]">
<div className="container mx-auto">
<div className="flex justify-center px-6 my-12">
<div className="w-full xl:w-3/4 lg:w-11/12 flex justify-center">
<div className="w-full lg:w-7/12 bg-white p-5 rounded-lg lg:rounded-l-none">
<h3 className="pt-4 text-2xl text-center">Login Your Account!</h3>
<form
className="px-8 pt-6 pb-8 mb-4 bg-white rounded"
onSubmit={handleLogin}
>
<div className="mb-4">
<label
className="block mb-2 text-sm font-bold text-gray-700"
htmlFor="email"
>
Email
</label>
<input
className="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="email"
type="email"
name="email"
placeholder="Email"
// onChange={(event) => setValues({email: event.target.value})}
onChange={handleChange}
value={values.email.email}
/>
</div>
<div className="mb-4 md:flex md:justify-between">
<div className="mb-4 md:mr-2 md:mb-0">
<label
className="block mb-2 text-sm font-bold text-gray-700"
htmlFor="password"
>
Password
</label>
<input
className="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="password"
type="password"
name="password"
placeholder="Password"
onChange={handleChange}
value={values.password}
// onChange={(event) => setValues({password: event.target.value})}
/>
</div>
</div>
<div className="mb-4 md:flex md:justify-between"></div>
<div className="mb-6 text-center">
<button
className="w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline"
type="submit"
>
Login
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
);
};
export default Login;
React路由器v6+答案
TL；DR：您可以使用新的useNavigate钩子。
import { useNavigate } from "react-router-dom";
function Component() {
let navigate = useNavigate();
// Somewhere in your code, e.g. inside a handler:
navigate("/posts");
}
useNavigate钩子返回一个可用于编程导航的函数。
反应路由器文档中的示例
import { useNavigate } from "react-router-dom";
function SignupForm() {
let navigate = useNavigate();
async function handleSubmit(event) {
event.preventDefault();
await submitForm(event.target);
navigate("../success", { replace: true });
// replace: true will replace the current entry in
// the history stack instead of adding a new one.
}
return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}
React Router 5.1.0+应答（使用钩子和React>16.8）
您可以使用Functional Components上的useHistory挂钩，并以编程方式导航：
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React Router 4.0.0+答案
在4.0及以上版本中，将历史记录用作组件的道具。
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
注意：如果＜Route＞未呈现组件，则此.props.history不存在。您应该使用＜Route path＝“…”component＝｛YourComponent｝/＞在YourComponent中具有this.props.history
React路由器3.0.0+答案
在3.0及以上版本中，将路由器用作组件的道具。
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React路由器2.4.0+答案
在2.4及以上版本中，使用更高阶的组件将路由器作为组件的道具。
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};
React Router 2.0.0+答案
此版本与1.x向后兼容，因此无需升级指南。仅仅通过这些例子就足够了。
也就是说，如果您希望切换到新模式，路由器内有一个browserHistory模块，您可以使用
从“react router”导入｛browserHistory｝
现在，您可以访问浏览器历史记录，因此可以执行推送、替换等操作。例如：
browserHistory.push（'/some/path'）
进一步阅读：历史和航行
React Router 1.x.x答案
我不会详细介绍升级。您可以在《升级指南》中阅读相关内容
这个问题的主要变化是从导航混合到历史。现在它使用浏览器历史记录API来更改路由，因此我们将从现在开始使用pushState（）。
下面是使用Mixin的示例：
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
请注意，此历史记录来自rackt/History项目。不是来自React Router本身。
如果您出于某种原因（可能是因为ES6类）不想使用Mixin，那么您可以从this.props.history中访问从路由器获得的历史记录。它将仅对路由器渲染的组件可用。因此，如果您想在任何子组件中使用它，则需要通过props将其作为属性传递。
您可以在他们的1.0.x文档中阅读有关新版本的更多信息
下面是一个关于在组件外部导航的帮助页面
它建议获取一个引用history=createHistory（），并对其调用replaceState。
React路由器0.13.x答案
我也遇到了同样的问题，只能通过带有react路由器的Navigation mixin找到解决方案。
我是这样做的
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
我能够在不需要访问.context的情况下调用transitionTo（）
或者你可以试试ES6高级课程
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
React路由器Redux注意：如果您使用的是Redux，还有一个项目叫做React Router Redux为您提供redux绑定ReactRouter，使用与React Redux会
React Router Redux有一些可用的方法，允许从内部动作创建者进行简单的导航。对于在React Native中拥有现有架构的人来说，这些模式尤其有用，并且他们希望在React Web中以最小的样板开销使用相同的模式。
探索以下方法：
推（位置）替换（位置）go（数字）goBack（）goForward（）
以下是Redux Thunk的用法示例：
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>
只需使用this.props.history.push（'/where/to/go'）；
推荐文章
- npm犯错!代码UNABLE_TO_GET_ISSUER_CERT_LOCALLY
- 反应-显示加载屏幕，而DOM是渲染?
- 如何解决“不能在模块外使用导入语句”在开玩笑
- 是否有可能在react渲染函数中返回空?
- 使用Redux而不是Flux的缺点是什么
- 反应:为什么当道具改变时子组件不更新
- React vs ReactDOM?
- Axios -删除请求与请求体和头?
- “react-scripts”不被视为内部或外部命令
- 如何从状态数组中删除一个项目?
- 是否可以用if…else…语句在React渲染函数?
- 如何设置默认的复选框ReactJS?
- 反应。类型无效——期望为字符串
- 如何动态地将一个类添加到手动类名?
- 无效的钩子调用。钩子只能在函数组件的内部调用
