标签: react-router-dom

我是 React、React Router (v4) 和 Redux 的新手。我试图mapStateToProps(state, ownProps)通过访问来访问 URL 参数，ownProps.match.params.id但params数组始终为空。我已经使用调试器来检查 ownProps 并且id应该传递的参数不在ownProps.

这是我的路线的片段：

    <Switch>
      <Route exact path='/' component={HomePage} />
      <Route path='/about' component={AboutPage} />
      <Route path='/course' component={ManageCoursePage} />
      <Route path='/course/:id' component={ManageCoursePage} />
      <Route path='/courses' component={CoursesPage} />
    </Switch>

这是来自的相关代码ManageCoursePage.js：

class ManageCoursePage extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      course: Object.assign({}, props.course),
      errors: {},
    };
  }
}

function mapStateToProps(state, ownProps) {
  const courseId = ownProps.match.params.id;
  ...
} …

具有以下“应用程序”，并且window.location不可配置。理想情况下，我想点击提交按钮并转到备用域。这实际上是更大应用程序的一部分，我在其中使用外部身份提供程序进行登录。下面的代码段是一个完整的示例来说明这个问题：

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Router from './routes';
import reducers from './reducers';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const store = createStore(reducers);

class Signin extends React.Component {
  onSubmit() {
    var result = Object.getOwnPropertyDescriptor(window, 'location');
    window.location = 'http://www.bbc.co.uk';
  }

  render() {
    return (
      <div>
        <form
          className="form-horizontal col-xs-10 col-xs-offset-1"
          onSubmit={this.onSubmit.bind(this)}
        >
          <div className="form-group">
            <span className="col-xs-3" />
            <div className="col-sm-6">
              <button …

我正在使用 react-router 将主页上的一组卡片定向到其他单个页面。但是，当我点击卡片时，新页面会在卡片组下方呈现，而我想要的只是呈现新页面。我认为问题可能与我的 App.js 在其中包含主页有关，但我不知道我应该把它放在哪里，是否应该有一个单独的链接等等？我将不胜感激任何帮助！谢谢

这是 App.js 的代码

import React from 'react';
import Routes from '../containers/routes.js';
import ProjectCards from '../containers/project_cards.js';

export default class App extends React.Component {
    render() {
        return(
            <div>
                <ProjectCards />
                <Routes />
            </div>
        );
    }
}

这是主容器：

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import ProjectCard from '../components/project_card.js';
import Project1 from '../components/project1.js';

class ProjectCards extends React.Component {
    render() {
        var projectCards = this.props.projects.map((project, i) => {
            return ( …

是否有可能像大多数社交媒体网站一样做类似的事情

somesite.com/username 但仍有某些路径，如 /login 或 /settings

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path="/:id - but not /login or /settings" component={User} />
            <Route path="/login" component={Login} />
            <Route path="/settings" component={Settings} />
        </div>
    </BrowserRouter>, document.getElementById('root')
);

使用精确的建议

<BrowserRouter>
    <div>
        <Route path="/:id" component={User} />
        <Route exact path="/settings" component={Settings} />           

    </div>
</BrowserRouter>, document.getElementById('root')

const User = () => {    
    return (
        <h1>user</h1>
    )
}

const Settings = () => {    
    return (
        <h1>settings</h1>
    )
}

转到 /settings 将显示

用户

设置

我正在尝试路由一条带有中间参数的路径。这是我的路线的样子。

import Events from "./views/EventsView";
import Event from "./views/EventView";
import NotFound from "./views/NotFoundView";
import RegistrationView from "./views/RegistrationView"

export default [
  {path: "/", component: Events, exact: true},
  {path: "/events", component: Events, exact: true},
  {path: "/events/:projectId", component: Event, exact: true},
  {path: "/events/:projectId/register", component: RegistrationView, exact: true},
  {component: NotFound}
]

然后我将我的路线映射到 a <Switch>which 中 a 中<Router>。

<Switch>
    {
        return routes.map(({path, component, exact}, key) =>
            <Route key={key} path={path} component={component} exact={exact}/>)
}
</Switch>

我Link用来访问Event组件。

<Link to="/events/1234">Title Here</Link>

问题 …

我在单击时尝试处理路径<Link/>，我需要使用e.preventDefault();防止路由器内的动画，所以这是我的代码，基本上我无法捕获更改历史目标的位置路径：

import React from 'react'; 
import { Link } from "react-router-dom";
export default class NavTransitions extends React.Component   {  
    constructor(props) {
        super(props);  
        this.changeRoutePath=this.changeRoutePath.bind(this);    
    } 
    changeRoutePath(e){
        e.preventDefault(); 
        this.props.history.push(this.match.path);
        console.log('this.match.path '+this.match.path);
        console.log('changeRoutePath');
    }
    render(){ 
        return(
            <div>
                <Link to="/item" 
                    onClick={this.changeRoutePath}>Prevent </Link>
           </div>
        );
    }
}

错误说 this.math 是未定义的

我在我的 react 项目中使用 react-router-dom 节点包来实现路由。

设置路由器链接后，我默认使用以下自定义 CSS 隐藏链接下划线：

let styles = theme => ({
   TextLink: {
      position: 'relative',
      color: 'white',
      textDecoration: 'none',    
      '&:hover':{
            color: 'white',
      },
});

使用这个我能够隐藏。

我的目标是制作一个链接，在悬停时显示下划线并具有过渡效果（链接下划线从中心向两端增长）。

带有任何附加节点包的修改后的 CSS 或代码示例会有所帮助。

我目前正在使用 react-testing-library 并且似乎无法弄清楚如何测试组件的 setState 。

在以下示例中，我尝试根据 API 中的数据测试加载的项目数是否正确。稍后将扩展它以测试诸如项目之间的交互之类的事情。

成分：

...

componentDidMount() {
    this.getModules();
}

getModules () {
    fetch('http://localhost:4000/api/query')
    .then(res => res.json())
    .then(res => this.setState({data : res.data}))
    .catch(err => console.error(err))
}

...

render() {
  return(
      <div data-testid="list">
          this.state.data.map((item) => {
              return <Item key={item.id} data={item}/>
          })
      </div>
  )
}

测试：

...

function renderWithRouter(
    ui,
    {route = '/', history = createMemoryHistory({initialEntries: [route]})} = {},) {
    return {
        ...render(<Router history={history}>{ui}</Router>),
        history,
    }
}

...

test('<ListModule> check list items', () => {
     const data = …

我是新手，仍在学习。我正在尝试在我的 React 项目中添加嵌套路由，以便 div 的内容根据路由而变化。

以下是我的组件：-

//index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

library.add(faIgloo);

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

serviceWorker.unregister();


// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'



import './App.css';

class App extends Component {

  render() {
    return (
        <Switch>
          <Route exact path="/protected" component={Protected}/>
          <Route path="/login" component={Login}/>
        </Switch>
    );
  }
}

export default …

我正在尝试在 ReactJS 中保护我的路由。在每个受保护的路线上，我想检查保存在 localStorage 中的用户是否良好。

您可以在下面看到我的路由文件 (app.js)：

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/login" component={Login} />
                    <Route path="/signup" component={SignUp} />
                    <Route path="/contact" component={Contact} />
                    <ProtectedRoute exac path="/user" component={Profile} />
                    <ProtectedRoute path="/user/person" component={SignUpPerson} />
                    <Route component={NotFound} />
                </Switch>
                <Footer />
            </div>
        );
    }
}

我的protectedRoute 文件：

const ProtectedRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        AuthService.isRightUser() ? (
            <Component {...props} />
        ) …