标签: react-router-dom

当用户单击浏览器后退按钮时，我试图观察 React Router 状态的变化。我的应用程序集成了 redux Provider 和 Material-UI。但是我无法开始getUserConfirmation工作。

请在下面找到我的代码片段。

 const getConfirmation = (message, callback) => {
      const allowTransition = window.confirm(message)
      strong textcallback(allowTransition)
    }
    const myHistory = createBrowserHistory();

    ReactDOM.render(
      <Provider store={store} >
        <MuiThemeProvider>
           <BrowserRouter basename="/app" history={myHistory} getUserConfirmation={getConfirmation} >
              <App />
           </BrowserRouter>
        </MuiThemeProvider>
      </Provider>, document.getElementById('root'));

使用的库版本：

React v16
react-router-dom v4.2.2
react-redux v5.0.6
material-ui v0.20.0
redux v3.7.2

我提到的一些文档：

https://reacttraining.com/react-router/web/api/BrowserRouter
https://codepen.io/pshrmn/pen/MpOpEY
https://codepen.io/anon/pen/gRXzMg?editors=0010

感谢您的帮助，谢谢

我有一个React应用程序react-router-dom。提供静态文件（index.html、 、...），将所有请求重新路由到使用。我用它来将所有 React 和 babel 代码编译到单个文件。整个内容在第一次访问时加载（加上使用）。blah blah.jsApache serverindex.html.htaccessWebpack.jscache first SW

每次加载路由（例如/profile）时，请求都会传递到服务器（发送HTTP请求），从而导致不必要的延迟

如何在不向服务器发送任何请求的情况下切换路由？

是否可以使用Service Worker（就像我的缓存优先方法一样）？

这是我的反应路由器组件

class App extends React.Component{
   render(){
       return(
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/profile" exact component={Profile} />
                    <Route path="/about"  component={About}/>

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

如果未找到路线，我正在尝试呈现“未找到”页面。我将路线分成模块。因此，当我执行 switch 语句时，在 switch 的底部添加未找到的页面，例如：

const AccessRoutes = () => {
return (
    <React.Fragment>
        <Route path="/login" exact component={Login}/>
        <Route path="/register" exact component={Register} />
        <Route path="/forgot-password" exact component={ForgotPassword}/>
    </React.Fragment>
       )
}
export default () => {
    return (
     <Switch>
         <AccessRoutes/>
         <Route render={() => <div>Not found</div>}
     </Switch>
    )
}

当您输入不在 上的路径时，未找到的路径永远不会匹配AccessRoutes，例如/hey显示空白屏幕。如果我放置路由而不将它们包装在另一个组件中，它就可以工作。

我缺少什么？

我正在尝试学习“react-router”，我正在制作一个应用程序，它有一个输入字段，为您提供一个下拉列表，其中包含欧洲各个火车站的链接，当您单击该链接时，它将呈现一个组件，在此封装Station组件并显示有关该站的更多详细信息。

对于此应用程序，我必须对外部 API 进行两次调用。第一个是找到火车站并将其显示在下拉列表中。这是有效的，从那里我可以获取电台的名称并将其放入下拉列表中，我还获得了一个id用于查询第二个 API 以获取电台的详细信息的名称。当用户单击下拉列表中的电台时，就会发生这种情况。这现在有效。我的问题是，当用户单击下拉列表中的电台时，我已经丢失了电台的名称。我想以某种方式将其传递给车站组件。

这是我的车站组件：

const Station = (props) => {
 return (
  <h1>Station name: {props.location.state.name}</h1>
 )
}

export default Station;

这是下拉组件，为了简单起见，我对两个电台进行了硬编码以尝试使其工作，否则下拉列表是与用户查询匹配的电台列表。

const Dropdown = (props) => {

return (
<ul>
  <li>
    <Link to={'/station/London'} key="lon" state={{name: 'London Central Station'}}>London </Link>
  </li>
  <li>
    <Link to={'/station/Paris'} key="par" state={{name: 'Paris Central Station'}}>Paris</Link>
  </li>
</ul>
  )
  }

export default Dropdown;

我尝试使用组件state中的 prop传递站名称Link，但是当Station组件安装时，该名称props.location.state是未定义的。

最后是我的路线：

const Details = (props) => {
return …

我一直在尝试将我的 HOC 中的一些道具传递给孩子们。HOC 包装反应路由器开关和路由。子组件中缺少道具。我使用 React.CloneElement 将道具添加到孩子，但似乎不起作用

<BrowserRouter>
<Layout>
        <React.Suspense fallback={loading()}>
          <Switch>
            <Route exact path="/" component={Login} />
            <Route path="/dashboard" component={Home} />
            <Route path="/tickets" component={Tickets} />

          </Switch>
        </React.Suspense>
      </Layout>
    </BrowserRouter>

这是 HOC（布局）

class Layout extends React.Component {
   .....

    render() {
        const children = this.props.children && React.cloneElement(this.props.children, { data: 'ok' })
...

子组件没有得到数据道具，我只得到这个

{history: {…}, location: {…}, match: {…}, staticContext: undefined}

我整天都在扯头发，试图让它发挥作用。我注意到的是，无论出于何种原因，过渡类 (classNames="fade") 永远不会应用于页面元素。因此，当我从一个页面导航到另一个页面时，两个页面组件都会在短时间内（超时时间）显示。

我应该在 600 毫秒内拥有什么...

<div class="RTG"> 
    <div class="page fade-appear fade-enter fade-enter-active"> <!-- 
destination component HTML --></div>
    <div class="page fade-exit fade-exit-active"> <!-- start component HTML --></div>
</div>

我得到的是..

<div class="RTG">
   <!-- "fade..." classes never applied to the child nodes" -->
   <div class="page"> <!-- destination component HTML --></div>
   <div class="page"> <!-- start component HTML --></div>
</div>

然后在 600 毫秒超时后，我只剩下......

<div class="RTG">
   <div class="page"> <!-- destination component HTML --></div>
</div>

注意 1：我将“RTG”类名放在 TransitionGroup 组件上，只是为了验证我的“页面”类组件实际上是 TransitionGroup 组件的直接后代。不存在任何其他原因。

注意 2：我使用的是 react-transition-group@2.4.0，因为我与最新版本存在兼容性问题。 …

它以某种方式正常工作react-scripts start。但是当尝试通过故事书查看各个组件时，它会抛出一个错误，就像上面标题中所说的那样。

这是我的代码。

index.tsx

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport \'./index.css\';\nimport App from \'./App\';\nimport * as serviceWorker from \'./serviceWorker\';\n\n\nReactDOM.render(<App />, document.getElementById(\'root\'));\n

App.tsx

import React from \'react\';\nimport\xc2\xa0{\xc2\xa0BrowserRouter,\xc2\xa0Route,\xc2\xa0Switch, Link\xc2\xa0}\xc2\xa0from\xc2\xa0"react-router-dom";\nimport { Register } from \'./pages/register/register\'\nimport { Login } from \'./pages/login/login\'\nimport { Home } from \'./pages/home/home\'\n\nconst App: React.FC = () => {\n  return (\n    <div id="app-root">\n      <BrowserRouter>\n        <Switch>\n          <Route path="/" exact component={Home} />\n          <Route path="/register" exact component={Register} />     \n          <Route path="/login" exact component={Login} />\n        </Switch>\n      </BrowserRouter>\n …

请我需要关于 react-router-dom 的帮助，我是图书馆的新手，从那以后似乎可以找到任何解决方案。我从 api 调用中得到三个结果，其中我映射数据以在 UI 上呈现它，现在我现在需要的是，如果我单击此列表之一上的一行，我希望它带我到屏幕仅显示我单击的单个内容的详细信息。

import React, { Component } from "react";

export default class User extends Component {
  state = { userDetails: "" };

  componentDidMount() {
    axios.get(`https://urlforapi.com`)
    .then(({ data }) => {
      this.setState({
        userDetails: data
      });
    });
  }

  render() {
    const { userDetails } = this.state;
    return (
      <div>
        {userDetails
          ? userDetails.map(info => {
              return (
                <Link to="/home/userDetails">
                  <div key={info.id}>
                    <p>{info.name}</p>
                  </div>
                  <div>
                    <p>{info.age}</p>
                  </div>
                  <div>
                    <p>{info.description}</p>
                  </div>
                </Link>
              );
            })
          : null}
      </div>
    );
  }
}

应用程序.jsx

<Router history={history}>
      <>
        <Switch>
          <Route path="/" exact component={HomePage} />          
          <Route path="/test/:id" exact component={TestPage} /> 
          <Route component={NotFound} />         
        </Switch>
      </>
</Router>

render() 内的 HomePage.jsx

<Link to="/test/1" >Test link</Link>

当我单击链接时，页面成功地将我重定向到http://localhost:8080/test/1，我可以看到该页面，但如果我单击刷新，页面就会消失，我只能看到空白屏幕，如果我想要从外部访问它，即如果我直接在浏览器上输入相同的网址，我看不到该页面，它是空白的。如何在刷新时管理它并从外部访问它？

我在刷新时收到控制台消息

在我的项目中，我有一个 antd 表。在那个表中，我列出了运动员。当我点击运动员的名字时，我应该被导航到运动员资料页面。

运动员资料路线 /athletes/{id}

但是对于这张桌子，我无法获得任何价值id。

这是我的数据源

[
   {
      email: "x@x.com",
      firstName: "X",
      id: 402,
      lastName: "X"
   },
   {
      email: "y@y.com",
      firstName: "Y",
      id: 403,
      lastName: "Y"
   },
   {
      email: "z@z.com",
      firstName: "Z",
      id: 404,
      lastName: "Z"
   }
]

以下是列对象的代码

const columns = [
      {
        title: "First Name",
        dataIndex: "firstName",
        className: "col-first-name",
        render: (text) => (
          <Link to={"/athletes/" + ???}>{text}</Link>
        ),
      },
      {
        title: "Last Name",
        dataIndex: "lastName",
        className: "col-last-name"
      },
      {
        title: "Email",
        dataIndex: "email",
        className: "col-email", …