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

Question

我大约 15 天前开始学习 React。以下代码正确添加了 post 但没有重定向到“/”。我正在使用 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

路由必须包含在路由器（通常）BrowserRouter 中，因此，您应该将它们全部放在该组件中，如下所示：

<BrowserRouter>
    <div className="App">
      <Box data-testid="app-container">
        <Routes>
          <Route path={"/"} element={<Home />} />
          <Route path={"/edit"} element={<edit/>} />
          <Route path={"/whatever"} element={<whatever/>} />
        </Routes>
      </Box>
    </div>
</BrowserRouter>

关于导航，在 react-router-dom v6 中，您必须使用挂钩 useNavigate() 并且它的工作方式如下：

  const navigate = useNavigate();

   <Button
       text={ES.common.back}
       onClick={() => navigate("/")}
   ></Button>

您必须导入

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

这里有一些documentation您可能会觉得有用

Answer 2

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

示例：

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

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

用这个 withNavigate HOC 修饰代码段中的组件。

export withNavigate(MyComponent);

从 props 访问 navigate 函数。

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>
  );
}

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

Navigate using react-router-dom v6 after performing user action

reactjs

react-router

react-router-dom