在 React Router v5 中，历史对象有一个监听方法。使用该方法，我编写了一个 usePathname 挂钩来在路径更改时重新呈现组件。在 React Router v6 中，这个方法不再存在。像这样的事情有替代方案吗？我不想使用 useLocation 因为如果状态发生变化它也会呈现，而在本例中我不需要。

该钩子与 v5 一起使用。

import React from "react";
import { useHistory } from "react-router";

export function usePathname(): string {
  let [state, setState] = React.useState<string>(window.location.pathname);

  const history = useHistory();
  React.useLayoutEffect(
    () =>
      history.listen((locationListener) => setState(locationListener.pathname)),
    [history]
  );
  return state;
}

<Link>如果其URL已经激活,如何禁用react-router？例如,如果我的URL在点击时不会改变<Link>我想要阻止点击或渲染<span>而不是a <Link>.

我想到的唯一解决方案是使用activeClassName(或activeStyle)和设置pointer-events: none;,但我更喜欢使用在IE9和IE10中运行的解决方案.

我正在尝试获得一个语义ui(react)菜单列表,它应该与react路由器一起工作,这意味着我想使用Link组件react router

如果我用这个......

<Menu.Item name='profile'>
    <Icon name='user' />
    My profile
</Menu.Item>

......它给了我结果:

<a class="item">
    <i aria-hidden="true" class="user icon"></i>
    My profile
</a>

但我想得到类似的东西

<Link to='profile'>
    <i aria-hidden="true" class="user icon"></i>
    My profile
</Link>

这个不起作用,因为语法错误:

<Menu.Item name='profile' as={ <Link to='profile' /> }>
    <Icon name='user' />
    My profile
</Menu.Item>

检查完这样的条件后,我有一条路线重定向

<Route exact path="/" render={()=>(
Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store}/>)}/>

当条件为真但未安装组件时,URL会更改.组件代码的其余部分如下所示.

render() {
    return (
      <div>
        ...
        <Route exact path="/" render={()=>(
          Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store} />         
        )} />
        <Route path="/intro" render={()=>(<IntroWizard state={Store.userInfo}/>)} />
        <Route path="/home" render={()=>(<Home state={Store}/>)} />
        <Route render={()=>(<h1>404 Not Found</h1>)} />
        <Footer />
      </div>
    );
  }

My App Component包含在BrowserRouter中,就像thi一样

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

当我直接在浏览器中点击url时,就像'localhost:3000/intro'组件成功安装,但是当它通过重定向时,它不会显示组件.我如何解决它？

编辑

所以缺少一个细节,我尝试创建另一个项目来重现问题.我的应用程序组件是来自mobx-react的观察者,它的导出方式如下所示

let App = observer(class App { ... })
export default App

我用一个示例代码创建了这个repo来重现你可以使用它的问题 https://github.com/mdanishs/mobxtest/

因此,当组件被包装到mobx-react观察器中时,重定向不起作用,否则它工作正常

我想创建一个订单页面,其中包含两个选项卡下订单选项卡,我的订单选项卡.所以我创建了一个Order.js文件和另一个OrderContent.js文件.

Order.js

/* @flow */
import React from 'react'

import {
  View,
  StatusBar,
} from 'react-native'

import SplashScreen from 'react-native-splash-screen'

import HomeHeader from '../Components/HomeHeader'
import OrderContent from './OrderContent'


export default class OrdersScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Orders',
    }),
  }
  static propTypes = {
    navigation: React.PropTypes.object.isRequired,
  }

  componentDidMount() {
    SplashScreen.hide()
  }
  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <StatusBar
          barStyle="light-content"
          backgroundColor={'#202930'} />
        <HomeHeader
          title="Order Page"
          navigation={this.props.navigation} /> …

这是我的webpack配置的代码:

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], 
  module: {
    loaders: [
      {
        exclude: /node_modules/, 
        test: /\.js$/, 
        loader: 'babel',
      },
    ],
  },
  output: {filename: 'app.js', path: '/'}, 
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/', 
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true}, 
});

app.use('/', express.static(path.resolve(__dirname, 'public')));

工作正常,应用程序运行在localhost:3000/index.html但是当我尝试实现React Router dom v4时.它不起作用.这是代码:

const About = () => <div> <h1>About</h1> </div>

ReactDOM.render(
   <BrowserRouter>
      <div>
      <Route exact path='/' component={App}/>
      <Route  path='/about' component={About}/>
      </div>
    </BrowserRouter>,
  mountNode
);

这是localhost的结果:3000/ 在localhost:3000 /约.我收到一个错误:无法获取/关于.不是我期待的,为什么这不会呈现？

关于

当我从 react-router-dom 使用 BrowserRouter 时，我的路由正在工作。但是为了使用自定义历史记录，我用来自 react-router 的 Router 替换了 BrowserRouter。之后，我的 Route 组件无法正确加载，但 url 正在正确更改。这是我的代码：

AppRouter-JS:----

import React from 'react';
import { Router, Route, Switch} from 'react-router';
// import { BrowserRouter as Router,Route, Switch} from 'react-router-dom';
import {createBrowserHistory} from 'history'

import Header from '../components/Header.js';
import Dashboard from '../components/DashboardPage.js'
import CreateExpense from '../components/CreateExpensePage.js';
import EditExpense from '../components/EditExpensePage.js';
import Help from '../components/HelpPage.js';
import PageNotFound from '../components/PageNotFound.js'
import LoginPage from '../components/LoginPage.js'


export const history = createBrowserHistory();

  const AppRouter = ()=>(
    <Router history={history}>
    <div>
      <Header/> …

我正在尝试反应路由器 v6。根据反应培训博客，我创建了路由对象并传递给useRoutes()：

function SomeOtherElement() {
  return <h1>add user</h1>;
}

const routes = [
  {
    path: 'app',
    element: <DashboardLayout />,
    children: [
      { path: 'account', element: <AccountView /> },
      {
        path: 'users', element: <UserListView />, 
        children: [
          { path: 'add', element: <SomeOtherElement /> }
        ]
      },
      { path: 'dashboard', element: <DashboardView /> },
      { path: 'products', element: <ProductListView /> },
      { path: 'settings', element: <SettingsView /> },
      { path: '*', element: <Navigate to="/404" /> } …

如果用户未登录且未设置令牌，我想重定向到反应中的另一个页面。为此，我尝试使用react-router-dom版本：6.0.2中的导航选项，就像旧的重定向选项一样。但我收到错误：[Navigate] 不是组件。的所有子组件必须是 a 或 <React.Fragment>。

import "./App.css";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";

import AuthPage from "./pages/Auth";
import CompetitionPage from "./pages/Competitions";
import ConditionsPage from "./pages/Conditions";
import JudgesPage from "./pages/Judges";
import StartPage from "./pages/Start";
import WinnersPage from "./pages/Winners";
import AuthContext from "./context/auth-context";
import SubmissionPage from "./pages/Submission";

import MainNavigation from "./components/navigation/MainNavigation.js";
import React, { Component } from "react";

class App extends Component {
  state = {
    token: null,
    userId: null,
  };

  login = (token, userId, tokenExpiration) => {
    this.setState({ …

我正在使用来自react-router v4 jest的组件进行测试<Link>.

我收到一个警告,<Link />需要来自react-router <Router />组件的上下文.

如何在测试中模拟或提供路由器上下文？(基本上我该如何解决此警告？)

Link.test.js

import React from 'react';
import renderer from 'react-test-renderer';
import { Link } from 'react-router-dom';

test('Link matches snapshot', () => {
  const component = renderer.create(
    <Link to="#" />
  );

  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

测试运行时的警告:

Warning: Failed context type: The context `router` is marked 
as required in `Link`, but its value is `undefined`.