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

您可以将要导航到的位置推到历史位置。

其他回答

您还可以在无状态组件中使用useHistory钩子。文档示例:

import { useHistory } from "react-router"

function HomeButton() {
  const history = useHistory()

  return (
    <button type="button" onClick={() => history.push("/home")}>
      Go home
    </button>
  )
}

注意:在中添加了挂钩react-router@5.1.0并且需要反应@>=16.8

这可能不是最好的方法,但。。。使用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'));

您可以在React中尝试onClick事件,并使用React Router的useNavigate钩子调用函数重定向到指定位置。您可以直接在onClick处理程序中使用回调函数,而不是指定其他函数。首先需要安装react router DOM。

npm i react-router-dom

尝试以下代码

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

const Page = () => {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/pagename')}>
      Go To Page
    </button>
  );
}

对于这一个,谁不控制服务器端,因此使用哈希路由器v2:

将历史记录放入单独的文件(例如app_history.js ES6):

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

并在任何地方使用它!

react router(app.js ES6)的入口点:

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

任何组件(ES6)内的导航:

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); // login failed
  } else {
    // logged in
    appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
  }
})

在我的回答中,有三种不同的方法可以通过编程重定向到路由。已经介绍了一些解决方案,但下面的解决方案仅针对具有附加演示应用程序的功能组件。

使用以下版本:

反应: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程序化重定向示例