标签: react-router-v4

上下文：使用 webpack 4 尝试 RR4 (devServer: {apiHistoryFallback: true} Webpack 4 配置示例

http://localhost:8080/reports在剪切并粘贴到地址栏时有效（又名历史回退正在工作），我可以单击 /reports/8 的链接，因为我已在 /reports 处添加了到组件的嵌套路由

<Route path=${match.path}/:reportId component={ReportDetail}/>

但是将http://localhost:8080/reports/9剪切并粘贴到地址栏中，我得到一个空白屏幕和一个： Refused to execute script from 'http://localhost:8080/reports/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 尝试为 devServer 设置 contentBase 但这并没有解决问题。

此功能在 Webpack 3 和 RR3 中运行良好。不确定是否要吠叫 Webpack 或 React Router 树。

与此类似的问题，但针对 Webpack 3

我有一个 axios 拦截器，当用户被强制注销（由于令牌过期）时，我想返回我的主页。

我不确定如何将反应路由器传递给它。我正在使用 mobx，但不确定这是否能帮助我解决这个问题。

export const axiosInstance = axios.create({
    baseURL: 'https://localhost:44391/api',
    timeout: 5000,
    contentType: "application/json",
    Authorization: getAuthToken()
  })

  axiosInstance.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    const originalRequest = error.config;
    if(error.code != "ECONNABORTED" && error.response.status === 401 && !originalRequest._retry){
      originalRequest._retry = true;
      return axiosInstance.post("/tokens/auth",{
        "refreshToken": getRefreshToken(),
        "grantType": "refresh_token"
    }).then(response => {
        localStorage.authentication = JSON.stringify(response.data);
        updateAuthInstant();
        return axiosInstance(originalRequest)
      });

    }
   return Promise.reject(error);
  });

在过去的几天里，我一直试图让我的嵌套路由正常工作，我不得不说我完全迷失了。

我正在尝试使以下功能正常工作：

1. 带有多个链接的侧边栏。其中之一通向 /banking。
2. /banking 默认情况下{ BankingCards }在{ CardWrapper }.
3. 当用户单击<Link>由 呈现的 4 张卡片之一时{ BankingCards }，我想将嵌套路径呈现在同一个{ CardWrapper }.

在下面的代码块中，您会注意到我尝试使用 switch 语句将组件动态分配给actionComponent. 这似乎以不止一种方式破坏了功能。

这是错误的方法，还是我错过了有关 React Router 组件的某些内容？

// Banking.js

import CardWrapper from '../../Wrappers/CardWrapper/CardWrapper';
import BankingCards from './BankingCards/BankingCards';
import AddBank from './AddBank/AddBank';
import AddDebit from './AddDebit/AddDebit';
import AddCredit from './AddCredit/AddCredit';
import AddDirect from './AddDirect/AddDirect';

class Banking extends Component {
  state = {};

  render() {
    const { match } = this.props; …

我有一个带有数据表的路由页面，在组件安装时获取数据。当我多次单击同一个 react-router-dom 链接（到上面的路由）时，似乎只有在路由更改时才卸载组件（要渲染不同的组件）。

我希望再次单击同一链接时强制重新安装组件以获取新数据。react-router-dom Link 或任何其他 Link 组件中是否有任何选项或任何技巧可以做到这一点？

我的示例代码在这里：https : //codesandbox.io/s/react-router-9wrkz

我希望多次单击“关于”链接时“关于”组件将重新安装

我有两个组件，它们都有一个开关元素，如下所示：

function App() {
  return (
    <div className="App">
    <Router>
        <AppBar position="static" color="inherit">
          <Toolbar>
            <Button color="inherit"><Link to="/deployments">Deployments</Link></Button>
            <Button color="inherit"><Link to="/tasks">Tasks</Link></Button>
          </Toolbar>
        </AppBar>
        <Switch>
          <Route exact path="/tasks" component={TasksPage}>
          </Route>
        </Switch>
    </Router>
    </div>
  );
}

function TasksPage({match}) {
    return (
        <div className="DeploymentsPage">
          {loading ? <h1>Loading...</h1> : 
          <div>
            <h1>Available Tasks</h1>
            <ul>
              {tasks.map((el, i) => <li key={i}><Link to={`${match.path}/${el.id}`}>{el.id}</Link></li>)}
            </ul>
            </div>
          }
         <Switch>
          <Route exact path="/tasks/:id" component={TaskPage} />
         </Switch> 
        </div>
    );
}

如果我/tasks/1现在去，则不会显示 TaskPage！而如果我将完全相同的 Route 元素移动到App它的 Switch 中，它就可以正常工作。

这是为什么？我尝试按照本教程进行操作：https : //reacttraining.com/react-router/web/guides/quick-start

我有一个路由器可以传递位置和子项的道具，但我不知道这些道具的正确类型是什么。

这是使用 react-router-dom 的路由器...

import React, { useReducer } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { globalContext, setGlobalContext } from './components/context';
import { Layout } from './components/layout';
import { defaultState, globalReducer } from './components/reducer';
import { Home } from './routes/home';
import { NotFound } from './routes/notFound';

const Router: React.FC = () => {
  const [global, setGlobal] = useReducer(globalReducer, defaultState);
  return (
    <setGlobalContext.Provider value={{ setGlobal }}>
      <globalContext.Provider value={{ global }}>
        <BrowserRouter>
          <Route
            render={({ location }) => …

我是 React 学习的新手，并尝试使用react-router-dom 构建一个应用程序。当我遇到“交换机”这个术语时，我能够实现基本的路由。谁能用我们使用 switch 的用例示例向我解释一下它的用途是什么？

我不知道为什么我会收到这个错误，我试过在线搜索，我看到了一些我尝试过但错误没有清除的建议。请有没有人知道我做错了什么。这是我的代码：

import React from 'react';

import { BrowseRouter as Router, Route } from 'react-router-dom';

import Join from './components/Join';
import Chat from './components/Chat';

const App = () => (
    <Router>
        <Route path="/" exact component={Join} />
        <Route path="/chat" exact component={Chat} />
    </Router>
);

export default App;

我正在使用React Router V4，并且已经有了该路由器的配置：

  <Router history={customHistory}>
    <Switch>
      <Route exact path={`/:lng?`} component={Page} />
      <Route path={`/:lng?/firstUrl`} component={Page}/>
      <Route path={`/:lng?/secondUrl`} component={Page}/>
      <Route component={NoMatch} />
    </Switch>
  </Router>

该lng是可选的语言参数应符合像模式en，de或不存在。例如，应用利用以下路线：

www.website.com/en
www.website.com/en/
www.website.com/  - will load default lang
www.website.com  - will load default lang
www.website.com/de
www.website.com/de/

另外，我还有其他组件，在其中定义了函数的路由：

  <ModalRoute component={SomeURL} path={`/:lng?/SomeURL`} parentPath={`/${lang}/`} />
  <ModalRoute component={SomeURL2} path={`/:lng?/SomeURL2`} parentPath={`/${lang}/`} />

因此，作为结果，我希望实现的是，仅接受允许的语言代码（和空参数），而不会接受-将被重定向到NoMatch组件。

可能吗？如何实现？
例子非常感谢

我正在尝试使用material-ui-next迷你变体抽屉来构建我的布局.我想要我的组件 - Home,Login,Register等在Drawer中呈现<main className={classes.content}>.什么是正确的方法？我应该在Drawer组件中导入Home,Login,Register和Router吗？或者,还有更好的方法？

相关图片: