相关疑难解决方法(0)

我有一个如下的路由器:

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Index}/>
        <Route path="login" component={Login}/>
    </Route>
</Router>

这就是我想要实现的目标:

1. /login如果未登录,则将用户重定向到
2. 如果用户/login在登录时尝试访问,请将其重定向到root/

所以现在我想以检查用户的状态App的componentDidMount,然后做一些事情,如:

if (!user.isLoggedIn) {
    this.context.router.push('login')
} else if(currentRoute == 'login') {
    this.context.router.push('/')
}

这里的问题是我找不到API来获取当前路由.

我发现使用Router.ActiveState mixin和路由处理程序建议这个封闭的问题,但看起来这两个解决方案现在已被弃用.

我正在尝试在react-router v6中检查“/admin/posts/new”到“/admin/*”。我发现有一个matchRoutes函数

import { useLocation } from "react-router";
const { pathname } = useLocation();
const isAdminPath = someMatchFunc(pathname,"/admin/*") <<<< something goes here returns true or null

我有一个我使用material-UI设计的Web应用程序,我正在使用Button导航来浏览我的基本着陆页组件.

<div className="footer">
  <BottomNavigation value={value} onChange={this.handleChange} className={classes.root}>
    <BottomNavigationAction label="signal" value="signal" icon={<ShowChart />} className={classes.content}/>
    <BottomNavigationAction label="hotlist" value="hotlist" icon={<HotList />} className={classes.content}/>
    <BottomNavigationAction label="analyze" value="analyze" icon={<PieChart />} className={classes.content}/>
    <BottomNavigationAction label="learn" value="learn" icon={<LibraryBooks/>} className={classes.content}/>
    <BottomNavigationAction label="dashboard" value="dashboard" icon={<PermIdentity/>} className={classes.content}/>
  </BottomNavigation>
  </div>

我尝试使用React-Router与这些预先定义的导航组件,但这不起作用,是否有任何可能的方法使用物料UI的按钮导航路由器？material-UI ButtonNavigation API中的按钮导航文章

测试用例

https://codesandbox.io/s/rr00y9w2wm

重现步骤

• 单击主题
• 单击Rendering with React

要么

• 转到https://rr00y9w2wm.codesandbox.io/topics/rendering

预期的行为

• match.params.topicId两个父主题组件应该是相同的,应该与match.params.topicId在Topic组件中访问时相同

实际行为

• match.params.topicId在Topic组件中访问时未定义
• match.params.topicId在主题组件中访问时正在呈现

我从这个封闭的问题中了解到,这不一定是一个错误.

此要求在想要在工厂Web应用程序中创建运行的用户中非常常见,其中Topics父级别的组件需要访问match.params.paramId,其中paramId是与嵌套(子)组件匹配的URL参数Topic:

const Topic = ({ match }) => (
  <div>
    <h2>Topic ID param from Topic Components</h2>
    <h3>{match.params.topicId}</h3>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <h3>{match.params.topicId || "undefined"}</h3>
    <Route path={`${match.url}/:topicId`} component={Topic} />
    ... …

如何使用React Router v4获取当前路径？

我尝试了以下无济于事：

const currentLocation = this.props.location.pathname;

错误： Cannot read property 'pathname' of undefined

这是我的Routes.js文件：

import React, {Component} from 'react';
import {  BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './Store';
import LevelOne from './containers/LevelOne';
import LevelTwo from './containers/LevelTwo';
import LevelThree from './containers/LevelThree';
import CreateProfile from './containers/Profile/CreateProfile';
import WhosWatching from './containers/Profile/WhosWatching';
import ProfileNameAvatar from './containers/Profile/ProfileNameAvatar';
import FavouriteGenres from './containers/Profile/FavouriteGenres';
import FourZeroFour from './containers/404';

import Header from './components/Header';

const store = …

我正在构建一个 React 应用程序并使用 React Router 4。导航栏由左侧的链接和右侧的几个按钮组成（我们称之为右侧工具）。

导航栏是布局的一部分。现在这些按钮对于不同的页面是不同的。例如，我有 3 个页面仪表板、历史记录和管理。在 Dashboard 中有一个 Filter 按钮，History 会有 Filter、Download。管理员将没有按钮。

在 Angular 中，它们是 $state.current 但在 React router 中找不到类似的东西。

匹配 url 字符串是很痛苦的。有人对此有更好的解决方案吗？