标签: react-router-dom

我正在创建一个SPA,我正在尝试使用react-router-dom包版本在应用程序中设置路由4.1.1.

我的路线定义如下:

<BrowserRouter>
  <div>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </div>
</BrowserRouter>

基本上,我想设置路由,以便对未定义路由的页面的任何请求都发送到{NotFound}组件.

怎么能实现这一目标？上面的解决方案在请求页面时呈现Login和NotFound组件/login.

亲切的问候

我正在使用 React Router hooks 进行导航useHistory。

导航： history.push("/home", { update: true });

在家里：我正在尝试获取参数 let {update} = useParams();

但update始终未定义。这段代码有什么问题。有什么建议 ？

我希望console.log('Refresh')每次路由更改时都会运行（从 Component1 切换到 Component2）。但它仅在第一次渲染时触发。为什么？

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

App.js：

import React, { useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import Nav from './Nav';
import Component1 from './Component1';
import Component2 from './Component2';

const App = () => {

  useEffect( () => console.log('Refresh'));

  return (
        [<Switch>
            <Route                            component = {Nav}/>
        </Switch>,
        <Switch>
            <Route exact path = …

我有一条像这样的路线

<Route path="/search/:slug"><SearchPage /></Route>

在我的 React Router 中。SearchPage 是一个useParams()使用react-router-dom.

// SearchPage.js
import React from 'react';
import { useParams } from 'react-router-dom';

export function SearchPage(props) {
    const { slug } = useParams();
    console.log(slug)
    // ...do other stuff
}

但是，当我导航到 时/search/foo#bar，SearchPage 组件仅foo在slug. 我的组件是否可以接收完整的foo#bar，或者更好的是，单独foo接收bar？

登录后我需要导航回原始请求的 URL。

例如，用户输入www.example.com/settings时未经过身份验证，它将导航到登录页面www.example.com/login。

一旦通过身份验证，它应该自动导航回www.example.com/settings。

我最初使用react-router-domv5 的方法非常简单：

const PrivateRoute = ({ isLoggedIn, component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: `/login/${props.location.search}`, state: { from: props.location } }}
          />
        )
      }
    />
  );
};


<PrivateRoute exact isLoggedIn={isLoggedIn} path="/settings" component={Settings} />

有人可以告诉我如何在 v6 中做到这一点吗？提前致谢

我在一个新的 TS 项目上开始使用react-router 6.4.3，发现它的 useRouteError hook 具有返回类型unknown。我不太确定如何正确访问返回的错误对象的属性。

基于这个答案，我相信我必须将其转换为我期望的界面，但我想确保在这里询问社区，这是否是正确的方法或者是否有更好的方法：

与Redux连接后,示例https://reacttraining.com/react-router/web/example/auth-workflow中的 PrivateRoute无效.

我的PrivateRoute看起来与原始版本几乎相同,但只连接到Redux并在原始示例中使用它而不是fakeAuth.

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
   {...rest}
   render={props =>
   auth.isAuthenticated
    ? <Component {...props} />
    : <Redirect to={{ pathname: "/login" }} />}
  />
);

 PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
  component: PropTypes.func.isRequired
 }

 const mapStateToProps = (state, ownProps) => {
  return {
     auth: state.auth
  }
};

export default connect(mapStateToProps)(PrivateRoute);

用法和结果: -

1. 不工作,但希望和期望工作
   • <PrivateRoute path="/member" component={MemberPage} />
2. 工作,但不希望像这样使用
   • <PrivateRoute path="/member" component={MemberPage} auth={auth} />
3. 工作.只是工作,但根本不想使用.从这一点可以理解,如果你将原始的PrivateRoute连接到Redux,你需要传递一些额外的道具(任何道具)来使PrivateRoute工作,否则它不起作用.任何人,请对这种行为给出一些暗示.这是我的主要问题
   • <PrivateRoute path="/member" component={MemberPage} …

大纲:

我正在努力学习react/redux/router.作为一个练习项目,我正在开发一个基本的联系人/客户端管理应用程序.使用react-router-doms Redirect组件时.我无法让后退/前进导航按预期工作.

细节:

我有一个表,其中包含一个条目列表,/contacts/当您单击其中一个表行时,我想Redirect使用<tr>s onClick属性设置的值.

单击<tr key={d._id} onClick={()=>this.setState({ id: d._id })}>更改state.id为clientIDs唯一值.这导致在Redirect表render方法中为true,触发了Redirect.

render() { // render method of '/contacts/' {Contacts} component
    return(
        ... // table head
        { this.state.id && <Redirect to={"/contacts/card/"+this.state.id}/> }
        ...// table content
    )
}

这是位于父级中的路由器 App.js

render() {
    return (
        <BrowserRouter basename="/" >
            <div>
                <NavBar/>
                <main>
                    <Switch>
                        <Route exact path="/" component={Login}/>
                        <Route 
                            exact path="/contacts" component={Contacts}/>
                        <Route …

我react-router-dom在React应用程序中使用路由。我的应用程序的一部分提取到另一个软件包中。依赖项列表如下所示：

./app/dashboard/package.json

{
  "dependencies": {
    "@app/components": "^1.0.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-router-dom": "^5.0.0"
  }
}

./app/components/package.json

{
  "peerDependencies": {
    "react-router-dom": "^5.0.0"
  }
}

当我使用@app/components需要组件的组件时，react-router-dom出现以下错误：

Uncaught Error: Invariant failed: You should not use <Route> outside a <Router> 
The above error occurred in the <Context.Consumer> component:
Uncaught (in promise) Error: Invariant failed: You should not use <Route> outside a <Router>

为什么会引发此错误？在App.js我用BrowserRouter

import React, { Suspense } from 'react';
import { Switch, …

我尝试嵌套一条路线：我在Catalog组件中有一个产品目录，它与 url "backoffice/catalog"匹配。

如果 url 与"backoffice/catalog/edit"匹配，我想路由到Edition组件，但我需要将Edition组件作为Catalog的子级来共享道具。

import React from "react";
import { Route, Switch } from "react-router-dom";
import { Home } from "./components/Static/Home.js";
import { Dashboard } from "./components/Backoffice/Dashboard.js";
import { Catalog } from "./components/Backoffice/catalog/Catalog.js";
import { Login } from "./components/Login/Login.js";
import { Signup } from "./components/Signup/Signup.js";
import { PrivateRoute } from "./components/PrivateRoute.js";
import "./scss/App.scss";
import {Header} from "./components/Structure/Header";
import {BOHeader} from …