使用react router，我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo（…）。
我想做导航。不是来自链接，而是来自下拉选择（例如）。我如何在代码中执行此操作？this.context是什么？
我看到了导航混合，但我可以在没有混合的情况下这样做吗？
当前回答
试试React Hook Router，“反应路由器的现代替代品”：
import { useRoutes, usePath, A} from "hookrouter";
要回答OP关于通过选择框链接的问题，您可以这样做：
navigate('/about');
更新的答案
我认为React Hook Router是一个很好的入门套件，帮助我学习了路由，但我后来更新了React Router，了解了它的历史和查询参数处理。
import { useLocation, useHistory } from 'react-router-dom';
const Component = (props) => {
const history = useHistory();
// Programmatically navigate
history.push(newUrlString);
}
您可以将要导航到的位置推到历史位置。
其他回答
这可能不是最好的方法，但。。。使用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'）);
在我的回答中，有三种不同的方法可以通过编程重定向到路由。已经介绍了一些解决方案，但下面的解决方案仅针对具有附加演示应用程序的功能组件。
使用以下版本：
反应：16.13.1反应时间：16.13.1反应路由器：5.2.0反应路由器dom：5.2.0字体：3.7.2
配置：
因此，首先解决方案是使用HashRouter，配置如下：
<HashRouter>
// ... buttons for redirect
<Switch>
<Route exact path="/(|home)" children={Home} />
<Route exact path="/usehistory" children={UseHistoryResult} />
<Route exact path="/withrouter" children={WithRouterResult} />
<Route exact path="/redirectpush" children={RedirectPushResult} />
<Route children={Home} />
</Switch>
</HashRouter>
从有关＜HashRouter＞的文档中：
一个<Router>，它使用URL的哈希部分（即window.location.hash）来保持UI与URL同步。
解决：
使用<Redirect>使用useState推送：
在功能组件（我的存储库中的RedirectPushAction组件）中使用，我们可以使用useState来处理重定向。棘手的是，一旦发生重定向，我们需要将重定向状态设置回false。通过使用带有0延迟的setTimeOut，我们等待React提交重定向到DOM，然后返回按钮，以便下次使用。
请在下面找到我的示例：
const [redirect, setRedirect] = useState(false);
const handleRedirect = useCallback(() => {
let render = null;
if (redirect) {
render = <Redirect to="/redirectpush" push={true} />
// In order wait until committing to the DOM
// and get back the button for clicking next time
setTimeout(() => setRedirect(false), 0);
}
return render;
}, [redirect]);
return <>
{handleRedirect()}
<button onClick={() => setRedirect(true)}>
Redirect push
</button>
</>
从<Redirect>文档：
渲染<重定向>将导航到新位置。新位置将覆盖历史堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）那样。
使用useHistory钩子：
在我的解决方案中，有一个名为UseHistoryAction的组件，它表示以下内容：
let history = useHistory();
return <button onClick={() => { history.push('/usehistory') }}>
useHistory redirect
</button>
useHistory钩子允许我们访问历史对象，它帮助我们以编程方式导航或更改路线。
使用withRouter，从道具获取历史记录：
创建了一个名为WithRouterAction的组件，显示如下：
const WithRouterAction = (props:any) => {
const { history } = props;
return <button onClick={() => { history.push('/withrouter') }}>
withRouter redirect
</button>
}
export default withRouter(WithRouterAction);
阅读路由器文档：
您可以通过withRouter高阶组件访问历史对象的财产和最接近的<Route>匹配项。无论何时渲染，withRouter都会将更新的匹配、位置和历史属性传递给包装组件。
演示：
为了更好地表示，我用这些示例构建了一个GitHub存储库，请在下面找到它：
React Router程序化重定向示例
带挂钩的React Router v6
import {useNavigate} from 'react-router-dom';
let navigate = useNavigate();
navigate('home');
为了浏览浏览器历史，
navigate(-1); ---> Go back
navigate(1); ---> Go forward
navigate(-2); ---> Move two steps backward.
对于当前的React版本（15.3），this.props.history.push（'/location'）；对我有用，但它显示了以下警告：
browser.js:49警告：[creact router]props.history和context.hhistory已弃用。请使用context.router。
我用context.router解决了这个问题：
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.backPressed = this.backPressed.bind(this);
}
backPressed() {
this.context.router.push('/back-location');
}
...
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default MyComponent;
布局/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钩子:从回调中访问最新状态
- React-Native:应用程序未注册错误
- ReactJS和公共文件夹中的图像
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- React组件中使用TypeScript的默认属性值
- 反应钩子-正确的方式清除超时和间隔
- 在React.js中正确的img路径
- 在React.js中更新组件onScroll的样式
- onClick ReactJS调用多个函数
- 为什么React 16中的Fragments比容器div更好?
- 如何在ReactJS中验证嵌套对象的PropTypes ?
- 如何在ReactJS中从“外部”访问组件方法?
- 'React'指的是一个UMD全局，但当前文件是一个模块
