在 React Router v6 中创建页面之间的链接答案

【问题标题】：Creating a Link Between Pages in React Router v6在 React Router v6 中创建页面之间的链接
【发布时间】：2022-01-18 13:17:48
【问题描述】：

App.js

class App extends Component {

  render() {
    return (
      <Router>
        <Header />
          <Routes>
              <Route path="/" element={<Home />} />
              <Route path="signin" element={<Signin />} />
          </Routes>
          </div>
      </Router>
    );
  }
}

Signin.js

class Card extends Component {

  render() {    
    return (        
      <Link to="signin">Signin</Link>
    )
  }
}

如何在不出现 Home 的情况下移动到 React 路由器版本 6 中的登录页面，谢谢你的帮助

【问题讨论】：

你能准确地说明你想要的行为是什么吗？单击Card 中的链接时，您只想导航到"/signin"？问题是什么？什么没有按预期工作？
我想解释一下为什么我的链接在我的主页上有效，而我希望我的登录组件显示在另一个页面上
您在问链接为什么/如何工作？它是否正确？见Link。
不，链接没有问题。我认为很难定义我的路线。我正在研究如何在我自己的代码中修复它
那么问题是什么？你想做什么但不起作用？

标签： reactjs react-router

【解决方案1】：

首先，我建议您将登录端点从signin 更改为/signin。其次，您的代码中有一个额外的结束 </div>。

这里可以这样使用Redirect

class App extends Component {

  render() {
    return (
      <Router>
        <Header />
          <Routes>
              <Route path="/" element={} >
                 <Redirect to="/signin" />
               </Route>
              <Route path="/home" element={< Home />} />
              <Route path="/signin" element={<Signin />} />
          </Routes>
      </Router>
    );
  }
}

欲了解更多信息refer here

【讨论】：

感谢您的回复，但 Redirect（以及在 useRoutes 中的 redirectTo）已被删除
点击以下链接：1.reactrouter.com/docs/en/v6/upgrading/… 2.gist.github.com/mjackson/b5748add2795ce7448a366ae8f8ae3bb（最后一部分）
感谢您的贡献，但很遗憾无法为您的回答投票

【解决方案2】：

当使用componentWillMount时，因为在渲染之前执行并且被使用根组件可以在该组件中使用路由，如下所示

class App extends Component {
  componentWillMount() {
    /**
     codes that fetch from api
    **/ 
  }
  render() {
    return (
      <Router>
        <Header />
          <Routes>
              <Route path="/" element={<Home />} />
          </Routes>
      </Router>
    );
  }
}

在已链接到登录的组件卡中，必须如下所示

class Card extends Component {

  render() {    
    return (        
      <button>
        {hasProducts ? <nav><Link to="signin">Checkout</Link></nav> : 'Checkout'}
      </button>
    )
  }
}

在决定使用库react-router的基于类的组件中，没有办法使用 useParams 访问当前 url 的路径，而不是这个可以使用window.location.pathname，也可以使用react-router v6 上的Routes 和条件三元运算符来访问当前的url 路径，如下所示

class WrappedComponent extends Component {
  render() {
      const pathname = window.location.pathname === current pathname;
    return (
      <>
      { pathname ? 
      <Routes>
          <Route path="signin" element={<Signin />} />
      </Routes>
      :
      <div>
      /**
       codes that return data of api and firstly rendered
      **/
      </div>
      }
      </>
    )
  }
}

【讨论】：