반응형
기록 사용, 리액트 큐브 돔 v6
사용하고 있다react-router-dom version 6사용할 때this.props.history.push('/UserDashboard')동작하지 않습니다.로 바꿨습니다.
const history = createBrowserHistory();
history.push('/UserDashboard')
하지만 아직 문제가 있어요 언제 로 리다이렉트하고 싶은지/UserDashboard링크만 변경해도 첫 번째 페이지는 그대로인가요?
도움이 필요하신가요?**
handleSubmit(event){
event.preventDefault();
const history = createBrowserHistory();
axios({
method: "POST",
url:"http://localhost:3001/users/login",
data: this.state
}).then((response)=>{
console.log(response.data.user.admin)
if (response.data.success === true && response.data.user.admin === false){
const history = createBrowserHistory();
history.push({
pathname:"/users",
state:{
Key : response.data.user }
});
}else if(response.statusCode === 401 ){
alert("Invalid username or password");
window.location.reload(false);
}
})
}
my routes.files:
import React from 'react';
import { Navigate } from 'react-router-dom';
import DashboardLayout from './Pages/DashboardLayout';
import AccountView from './Pages/views/account/AccountView';
import CustomerListView from './Pages/views/customer/CustomerListView';
import DashboardView from './Pages/views/reports/DashboardView';
import ProductListView from './Pages/views/product/ProductListView';
import SettingsView from './Pages/views/settings/SettingsView';
import Home from './Pages/home';
import About from './Pages/About';
import Partners from './Pages/Partners';
import Services from './Pages/services';
import Login from './Pages/Login';
import RD from './Pages/RD';
import ContactUs from './Pages/contactus';
import Apply from './Pages/apply';
import PartnerShip from './Pages/partnership';
import News from './Pages/News';
const routes = [
{
path: 'users',
element: <DashboardLayout />,
children: [
{ path: 'account', element: <AccountView /> },
{ path: 'customers', element: <CustomerListView /> },
{ path: 'dashboard', element: <DashboardView /> },
{ path: 'products', element: <ProductListView /> },
{ path: 'settings', element: <SettingsView /> }
]
},
{
path: '/',
element: <Home />,
},
{
path: 'about',
element: <About />
},
{path: 'partners',
element: <Partners />,
},
{
path: 'services',
element: <Services />,
},
{
path: 'contactus',
element: <ContactUs />,
},
{
path: 'login',
element: <Login />,
},{
path: 'RD',
element: <RD />,
},
{
path: 'apply',
element: <Apply />,
},
{
path: 'partnership',
element: <PartnerShip />,
},
{
path: 'News',
element: <News />,
}
];
export default routes;
react-router-dom v6에서는 useHistory 대신 useNavigate를 사용해야 합니다.
https://reacttraining.com/blog/react-router-v6-pre/ 의 예를 참조해 주세요.
import React from 'react';
import { useNavigate } from 'react-router-dom';
function App() {
let navigate = useNavigate();
let [error, setError] = React.useState(null);
async function handleSubmit(event) {
event.preventDefault();
let result = await submitForm(event.target);
if (result.error) {
setError(result.error);
} else {
navigate('success');
}
}
return (
<form onSubmit={handleSubmit}>
// ...
</form>
);
}
react-router-dom 소스 코드를 기반으로 다음과 같은 작업을 수행할 수 있습니다.
// === Javascript version === //
import { Router } from 'react-router-dom';
const CustomRouter = ({
basename,
children,
history,
}) => {
const [state, setState] = React.useState({
action: history.action,
location: history.location,
});
React.useLayoutEffect(() => history.listen(setState), [history]);
return (
<Router
basename={basename}
children={children}
location={state.location}
navigationType={state.action}
navigator={history}
/>
);
};
// === typescript version === //
import * as React from "react";
import { BrowserHistory } from "history";
import { Router, Navigator } from "react-router-dom";
type Props = {
basename?: string;
children: React.ReactNode;
history: BrowserHistory;
}
const CustomRouter = ({ basename, children, history }: Props) => {
const [state, setState] = React.useState({
action: history.action,
location: history.location,
});
React.useLayoutEffect(() => history.listen(setState),[history])
return (
<Router
basename={basename}
location={state.location}
navigator={history}
navigationType={state.action}
>
{children}
</Router>
);
};
그리고 당신의 역사를 외부에서 가져오세요.
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
<CustomRouter history={history}>
...
</CustomRouter>
react-router-dom v6에는 더 이상 {useHistory} 같은 것이 없습니다.useHistory 작업을 수행하는 더 좋은 방법이 있습니다.
첫 번째 가져오기용도 탐색...
import { useNavigate } from 'react-router-dom';
그러면 Import 후 이 작업을 수행합니다.
function Test() {
const history = useNavigate();
function handleSubmit(e) {
e.preventDefault();
history('/home');
}
return (
<form onSubmit={handleSubmit}>
<button>Subimt</button>
</form>
)
}
Reactjs v6에는 useHistory 대신 useNavigate가 포함되어 있습니다.
=> 우선은 다음과 같이 Import해야 합니다: 'suce-navigate-dom'에서 {useNavigate} Import.
=> 그러면 다음과 같은 반응 기능 구성 요소에서만 사용할 수 있습니다.
const navigate = useNavigate();
=> 그리고, 어느 루트를 탐색할지는, 그 루트명을 다음과 같이 입력합니다.
네비게이트 / 어바웃);
예: 버튼을 클릭한 후 [About]페이지로 이동할 경우그럼 이걸 넣으...
다음 onClick 이벤트에서 탐색("/about")합니다.
<button on Click = {()= > ("(" / about " )}> 약 페이지로 이동합니다.
감사해요.
사용자 사용내비게이트 대상react-router-domv6
import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')
@Poyoman의 답변을 기반으로 한 Custom Browser Router 유형:
CustomBrowserRouter 구성 요소 생성:
import React from "react";
import { BrowserHistory, Action, Location } from "history";
import { Router } from "react-router-dom"
interface CustomRouterProps {
basename?: string,
children?: React.ReactNode,
history: BrowserHistory
}
interface CustomRouterState {
action: Action,
location: Location
}
export default class CustomBrowserRouter extends React.Component<CustomRouterProps, CustomRouterState> {
constructor(props: CustomRouterProps) {
super(props);
this.state = {
action: props.history.action,
location: props.history.location
};
React.useLayoutEffect(() => props.history.listen(this.setState), [props.history]);
}
render() {
return (
<Router
basename={this.props.basename}
children={this.props.children}
location={this.state.location}
navigationType={this.state.action}
navigator={this.props.history}
/>
);
}
}
CustomBrowserRouter 사용:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createBrowserHistory } from "history";
import CustomBrowserRouter from './CustomRouter/CustomBrowserRouter';
let history = createBrowserHistory();
ReactDOM.render(
<React.StrictMode>
<CustomBrowserRouter history={history}>
<App />
</CustomBrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
react v6+에서 클래스 컴포넌트를 계속 사용하고 있는 경우, 새로운 네비게이션 오브젝트를 이력으로서 삽입하는 것도 하나의 솔루션입니다.이것은 사용할 수 없다는 성가신 문제를 회피한다.navigate()단, 앞으로는 클래스 컴포넌트에서 벗어나야 합니다.다른 사람들이 그러하듯이, 나는 많은 코드베이스로 이 곤경에 처했다는 것을 알았다.
import React, { Component } from "react";
import { useNavigate } from "react-router-dom";
class MyClass extends Component {
handleClick(e) => {
this.props.history('place-to-route');
}
}
export default (props) => (
<MyClass history={useNavigate()} />
);
@Reid Nantes 버전을 사용할 수 없어서 기능 컴포넌트로 변환하여 잘 작동합니다.
import React from "react";
import { BrowserHistory, Action, Location } from "history";
import { Router } from "react-router-dom";
interface CustomRouterProps {
basename?: string;
children?: React.ReactNode;
history: BrowserHistory;
}
interface CustomRouterState {
action: Action;
location: Location;
}
export const CustomBrowserRouter: React.FC<CustomRouterProps> = (props: CustomRouterProps) => {
const [state, setState] = React.useState<CustomRouterState>({
action: props.history.action,
location: props.history.location,
});
React.useLayoutEffect(() => props.history.listen(setState), [props.history]);
return <Router basename={props.basename} children={props.children} location={state.location} navigationType={state.action} navigator={props.history} />;
};
모듈을 사용하는 것이 가장 좋습니다.
let _navigate
export const navigate = (...args) => _navigate(...args)
export const useNavigateSync = () => {
_navigate = useNavigate()
}
달려.useNavigateSync사용할 수 있습니다.수입품navigate코드의 범위 내라면 어디든지.
해결방법은
v6에서 이 앱은 탐색 API를 사용하도록 다시 작성해야 합니다.대부분의 경우 useHistory를 변경하여 useNavigate를 사용하고 history.push 또는 history.call site를 변경합니다.
// This is a React Router v5 app
import { useHistory } from "react-router-dom";
function App() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
...의 기사를 보다https://reactrouter.com/en/v6.3.0/upgrading/v5#use-usenavigate-instead-of-usehistory
// This is a React Router v6 app
import { useNavigate } from "react-router-dom";
function App() {
let navigate = useNavigate();
function handleClick() {
navigate("/home");
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
push를 네비게이트 합니다.return을 사용하다
@poyoman 솔루션을 참조하여 TypeScript 형식의 구현을 원하는 경우 다음을 시도해 보십시오.
import React, { FC, useLayoutEffect, useState } from 'react';
import { Router, RouterProps } from 'react-router-dom';
import { MemoryHistory } from 'history';
interface CustomRouterProps extends Omit<RouterProps, 'location' | 'navigator'> {
history: MemoryHistory;
}
export const CustomRouter: FC<CustomRouterProps> = ({ basename, children, history }) => {
const [state, setState] = useState<Pick<MemoryHistory, 'action' | 'location'>>({
action: history.action,
location: history.location,
});
useLayoutEffect(() => history.listen(setState), [history]);
return (
<Router
basename={basename}
children={children}
location={state.location}
navigationType={state.action}
navigator={history}
/>
);
};
다음과 같은 수업에서 소품에서 사용 가능: Github에 대한 timdorr의 답변에 근거합니다.
클래스 메서드에서 다음 소품을 사용합니다.
this.props.navigate("/about")
다음 설명과 같이 루트 래퍼 포함:
// Routes in app.js
import MovieForm from "./components/movieForm";
import ElementWrapper from "./components/elementWrapper";
<Route path="/movies/new" element={<ElementWrapper routeElement={MovieForm} />} />
// i.e. specific to this question:
function getElement(route) {
return <ElementWrapper routeElement={route} />
}
children: [
{ path: 'account', element: getElement(AccountView) },
{ path: 'customers', element: getElement(CustomerListView) },
{ path: 'dashboard', element: getElement(DashboardView) },
{ path: 'products', element: getElement(ProductListView) },
{ path: 'settings', element: getElement(SettingsView) }
]
// Wrapper in elementWrapper.jsx in /components
import React from "react";
import { useNavigate } from "react-router-dom";
const ElementWrapper = (props) => {
const navigator = useNavigate();
const Element = props.routeElement;
return <Element navigator={navigator} {...props} />;
};
export default ElementWrapper;
import {useNavigate} from 'react-router-dom'
class EmployeeComponent extends Component {
constructor(props) {
const { navigate } = this.props;
this.saveEmployee= this.saveEmployee.bind(this);
}
saveEmployee=(e) => {
e.preventDefault()
this.props.navigate("/employees")
}
}
export default function(props) {
const navigate = useNavigate();
return <EmployeeComponent {...props} navigate={navigate} />;
}
에서 설명하는 솔루션을 사용할 수 있습니다.
class MyBackButton extends React.Component {
render() {
// Get it from props
const { navigation } = this.props;
}
}
// Wrap and export
export default function(props) {
const navigation = useNavigation();
return <MyBackButton {...props} navigation={navigation} />;
}언급URL : https://stackoverflow.com/questions/63471931/using-history-with-react-router-dom-v6
반응형
'sourcetip' 카테고리의 다른 글
| 하드코드된 JSON 문자열을 변수에 저장 (0) | 2023.03.14 |
|---|---|
| 오브젝트 배열에 대해 ng-interface를 설정합니다. (0) | 2023.03.14 |
| 다른 ng-include가 같은 페이지에 있습니다.각자에게 다른 변수를 송신하려면 어떻게 해야 합니까? (0) | 2023.03.14 |
| $addToSet과 반대되는 MongoDB (0) | 2023.03.14 |
| Java에서 JSON 유형을 바이트 배열 형식으로 변환 (0) | 2023.03.14 |