执行用户操作后使用react-router-dom v6导航

Question

大约 15 天前我开始学习 React。以下代码正确添加帖子，但不重定向到“/”。我正在使用react-router-dom v6。

render(){
  return <div>
              <Routes>
                <Route exact path="/" element={
                      <div>
                      <Title title={'Arijit - Photowall'}/>   
                        <Photowall posts={this.state.posts} onRemovePhoto={this.removePhoto} /> 

                      </div>

      } >
                          </Route>
                    <Route path="/addPhotos" element={ 
                     
                    <AddPhoto onAddPhoto={(addedPost)=>{
          
                      this.addPhoto(addedPost)
                      
                      
                      }}
                      
                      >
                        <Navigate to="/" />
                      </AddPhoto>
                      
                     }/>
                  </Routes>
        </div>
}

Answer 1

发出命令式导航操作的方法react-router-dom@6是使用navigate从useNavigate钩子返回的函数。不过，您在代码片段中共享的代码来自类组件，因此您需要创建一个高阶组件来使用钩子useNavigate并将navigate函数作为道具注入。

例子：

import { useNavigate } from 'react-router-dom';

const withNavigate = Component => props => {
  const navigate = useNavigate();
  return <Component {...props} navigate={navigate} />;
};

使用此 HOC 装饰代码片段中的组件withNavigate。

export withNavigate(MyComponent);

navigate从 props访问该函数。

render(){
  const { navigate } = this.props;

  return (
    <div>
      <Routes>
        <Route
          path="/"
          element={(
            <div>
              <Title title={'Arijit - Photowall'}/>   
              <Photowall posts={this.state.posts} onRemovePhoto={this.removePhoto} /> 
            </div>
          )}
        />
        <Route
          path="/addPhotos"
          element={( 
            <AddPhoto
              onAddPhoto={(addedPost) => {
                this.addPhoto(addedPost);
                navigate("/");
              }}
            />
          )}
        />
      </Routes>
    </div>
  );
}

使用打字稿

interface WithRouter {
  location: ReturnType<typeof useLocation>;
  navigate: ReturnType<typeof useNavigate>;
  params: ReturnType<typeof useParams>;
}

const withRouter = <P extends {}>(Component: React.ComponentType<P>) => (
  props: Omit<P, keyof WithRouter>
) => {
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams();

  return <Component {...(props as P)} {...{ location, navigate, params }} />;
};

用法示例：

interface MyComponentProps {
 foo: string;
}

type MyComponentPropsWithRouter = MyComponentProps & WithRouter

class MyComponent extends React.Component<MyComponentPropsWithRouter> {
  render() {
    const { foo, navigate, location, params } = this.props;
    const { bar } = params as { bar?: string };

    return (
      <>
        <h1>MyComponent: {location.pathname}</h1>
        <h2>Foo prop: {foo}</h2>
        <h2>Param?: {bar}</h2>
        <button type="button" onClick={() => navigate("/test")}>
          Navigate
        </button>
      </>
    );
  }
}

const MyDecoratedComponent = withRouter(MyComponent);