Làm thế nào để chuyển sang Lịch sử trong React Router v4?

397
Chris 2017-03-10 06:56.

Trong phiên bản hiện tại của React Router (v3), tôi có thể chấp nhận phản hồi của máy chủ và sử dụng browserHistory.pushđể truy cập trang phản hồi thích hợp. Tuy nhiên, điều này không khả dụng trong v4 và tôi không chắc cách thích hợp để xử lý điều này là gì.

Trong ví dụ này, bằng cách sử dụng Redux, các thành phần / app-product-form.js sẽ gọi this.props.addProduct(props)khi người dùng gửi biểu mẫu. Khi máy chủ trả về thành công, người dùng sẽ được đưa đến trang Giỏ hàng.

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

Làm cách nào để chuyển hướng đến trang Giỏ hàng từ chức năng cho React Router v4?

21 answers

344
Oleg Belostotsky 2017-08-24 11:32.

Bạn có thể sử dụng các historyphương pháp bên ngoài các thành phần của mình. Hãy thử bằng cách sau.

Đầu tiên, tạo một historyđối tượng bằng cách sử dụng gói lịch sử :

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Sau đó quấn nó vào <Router>( xin lưu ý , bạn nên sử dụng import { Router }thay vì import { BrowserRouter as Router }):

// src/index.jsx

// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

Thay đổi vị trí hiện tại của bạn từ bất kỳ nơi nào, ví dụ:

// src/actions/userActionCreators.js

// ...
import history from '../history';

export function login(credentials) {
  return function (dispatch) {
    return loginRemotely(credentials)
      .then((response) => {
        // ...
        history.push('/');
      });
  };
}

UPD : Bạn cũng có thể xem một ví dụ hơi khác trong Câu hỏi thường gặp về React Router .

367
Chris 2017-03-11 00:26.

React Router v4 về cơ bản khác với v3 (và trước đó) và bạn không thể làm browserHistory.push()như trước đây.

Cuộc thảo luận này có vẻ liên quan nếu bạn muốn biết thêm thông tin:

  • Tạo mới browserHistorysẽ không hoạt động vì <BrowserRouter>tạo phiên bản lịch sử của riêng nó và lắng nghe các thay đổi trên đó. Vì vậy, một phiên bản khác sẽ thay đổi url nhưng không cập nhật <BrowserRouter>.
  • browserHistory không được tiếp xúc bởi bộ định tuyến phản ứng trong v4, chỉ trong v2.

Thay vào đó, bạn có một số tùy chọn để thực hiện việc này:

  • Sử dụng thành phần withRouterbậc cao

    Thay vào đó, bạn nên sử dụng withRouterthành phần thứ tự cao và bọc nó vào thành phần sẽ đẩy lên lịch sử. Ví dụ:

    import React from "react";
    import { withRouter } from "react-router-dom";
    
    class MyComponent extends React.Component {
      ...
      myFunction() {
        this.props.history.push("/some/Path");
      }
      ...
    }
    export default withRouter(MyComponent);
    

    Kiểm tra tài liệu chính thức để biết thêm thông tin:

    Bạn có thể nhận được quyền truy cập vào các historythuộc tính của đối tượng và gần nhất <Route>matchthông qua các thành phần bậc cao withRouter. withRouter sẽ lại làm cho thành phần của nó mỗi khi con đường thay đổi với các đạo cụ giống như <Route>làm đạo cụ: { match, location, history }.


  • Sử dụng contextAPI

    Sử dụng ngữ cảnh có thể là một trong những giải pháp dễ dàng nhất, nhưng là một API thử nghiệm, nó không ổn định và không được hỗ trợ. Chỉ sử dụng nó khi mọi thứ khác không thành công. Đây là một ví dụ:

    import React from "react";
    import PropTypes from "prop-types";
    
    class MyComponent extends React.Component {
      static contextTypes = {
        router: PropTypes.object
      }
      constructor(props, context) {
         super(props, context);
      }
      ...
      myFunction() {
        this.context.router.history.push("/some/Path");
      }
      ...
    }
    

    Hãy xem tài liệu chính thức về ngữ cảnh:

    Nếu bạn muốn ứng dụng của mình ổn định, không sử dụng ngữ cảnh. Nó là một API thử nghiệm và nó có khả năng bị phá vỡ trong các bản phát hành React trong tương lai.

    Nếu bạn khăng khăng sử dụng ngữ cảnh bất chấp những cảnh báo này, hãy cố gắng cô lập việc sử dụng ngữ cảnh của bạn trong một khu vực nhỏ và tránh sử dụng trực tiếp API ngữ cảnh khi có thể để dễ dàng nâng cấp hơn khi API thay đổi.

72
Hadi Abu 2019-10-24 21:59.

Bây giờ với react-router v5, bạn có thể sử dụng hook vòng đời useHistory như sau:

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

đọc thêm tại: https://reacttraining.com/react-router/web/api/Hooks/usehistory

35
Saahithyan Vigneswaran 2018-12-25 08:13.

Cách đơn giản nhất trong React Router 4 là sử dụng

this.props.history.push('/new/url');

Nhưng để sử dụng phương pháp này, thành phần hiện tại của bạn phải có quyền truy cập vào historyđối tượng. Chúng tôi có thể truy cập bằng cách

  1. Nếu thành phần của bạn được liên kết Routetrực tiếp, thì thành phần của bạn đã có quyền truy cập vào historyđối tượng.

    ví dụ:

    <Route path="/profile" component={ViewProfile}/>
    

    Ở đây ViewProfilecó quyền truy cập vào history.

  2. Nếu không kết nối Routetrực tiếp với.

    ví dụ:

    <Route path="/users" render={() => <ViewUsers/>}
    

    Sau đó, chúng ta phải sử dụng withRouter, một sự biến đổi thứ tự lớn hơn để làm cong thành phần hiện có.

    ViewUsersThành phần bên trong

    • import { withRouter } from 'react-router-dom';

    • export default withRouter(ViewUsers);

    Vậy là xong, ViewUsersthành phần của bạn có quyền truy cập vào historyđối tượng.

CẬP NHẬT

2- trong trường hợp này, chuyển tất cả các tuyến propsđến thành phần của bạn và sau đó chúng tôi có thể truy cập this.props.historytừ thành phần ngay cả khi không cóHOC

ví dụ:

<Route path="/users" render={props => <ViewUsers {...props} />}
26
Michael Horojanski 2017-04-13 11:03.

Đây là cách tôi đã làm điều đó:

import React, {Component} from 'react';

export default class Link extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
    }
    onLogout() {
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                <h1>Your Links</h1>
                <button onClick={this.onLogout}>Logout</button>
            </div>
        );
    }
}

Sử dụng this.props.history.push('/cart');để chuyển hướng đến trang giỏ hàng, nó sẽ được lưu trong đối tượng lịch sử.

Hãy tận hưởng, Michael.

23
alainbex 2017-08-14 13:51.

Theo tài liệu React Router v4 - Phiên tích hợp sâu Redux

Tích hợp sâu là cần thiết để:

"có thể điều hướng bằng cách cử hành động"

Tuy nhiên, họ khuyến nghị cách tiếp cận này như một giải pháp thay thế cho "tích hợp sâu":

"Thay vì điều động các hành động để điều hướng, bạn có thể chuyển đối tượng lịch sử được cung cấp để định tuyến các thành phần đến các hành động của bạn và điều hướng với nó ở đó."

Vì vậy, bạn có thể bao bọc thành phần của mình bằng thành phần thứ tự cao withRouter:

export default withRouter(connect(null, { actionCreatorName })(ReactComponent));

sẽ chuyển API lịch sử đến các đạo cụ. Vì vậy, bạn có thể gọi người tạo hành động chuyển lịch sử như một tham số. Ví dụ, bên trong ReactComponent của bạn:

onClick={() => {
  this.props.actionCreatorName(
    this.props.history,
    otherParams
  );
}}

Sau đó, bên trong hành động / index.js của bạn:

export function actionCreatorName(history, param) {
  return dispatch => {
    dispatch({
      type: SOME_ACTION,
      payload: param.data
    });
    history.push("/path");
  };
}
19
Khrystyna Skvarok 2017-10-29 13:06.

Câu hỏi khó, khiến tôi mất khá nhiều thời gian, nhưng cuối cùng, tôi đã giải quyết nó theo cách này:

Bao bọc vùng chứa của bạn withRoutervà chuyển lịch sử cho hành động của bạn đang hoạt động mapDispatchToProps. Trong thực tế, hãy sử dụng history.push ('/ url') để điều hướng.

Hoạt động:

export function saveData(history, data) {
  fetch.post('/save', data)
     .then((response) => {
       ...
       history.push('/url');
     })
};

Thùng đựng hàng:

import { withRouter } from 'react-router-dom';
...
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    save: (data) => dispatch(saveData(ownProps.history, data))}
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Container));

Đây là giá trị Phản ứng Router v4.x .

7
Aimar 2017-05-18 22:25.

this.context.history.push sẽ không làm việc.

Tôi đã quản lý để đẩy hoạt động như thế này:

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

    if (this.props.auth.success) {
        this.context.router.history.push("/some/Path")
    }

}
7
Diego 2017-10-31 02:15.

Tôi đưa ra một giải pháp nữa trong trường hợp nó có giá trị đối với người khác.

Tôi có một history.jstệp mà tôi có những thứ sau:

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.pushLater = (...args) => setImmediate(() => history.push(...args))
export default history

Tiếp theo, trên Gốc của tôi, nơi tôi xác định bộ định tuyến của mình, tôi sử dụng như sau:

import history from '../history'
import { Provider } from 'react-redux'
import { Router, Route, Switch } from 'react-router-dom'

export default class Root extends React.Component {
  render() {
    return (
     <Provider store={store}>
      <Router history={history}>
       <Switch>
        ...
       </Switch>
      </Router>
     </Provider>
    )
   }
  }

Cuối cùng, actions.jstôi nhập Lịch sử và sử dụng pushLater

import history from './history'
export const login = createAction(
...
history.pushLater({ pathname: PATH_REDIRECT_LOGIN })
...)

Bằng cách này, tôi có thể chuyển sang các hành động mới sau các lệnh gọi API.

Hy vọng nó giúp!

6
user3812377 2017-08-09 23:04.

Trong trường hợp này, bạn đang chuyển các đạo cụ cho cú đánh của mình. Vì vậy, bạn có thể chỉ cần gọi

props.history.push('/cart')

Nếu đây không phải là trường hợp, bạn vẫn có thể chuyển lịch sử từ thành phần của mình

export function addProduct(data, history) {
  return dispatch => {
    axios.post('/url', data).then((response) => {
      dispatch({ type: types.AUTH_USER })
      history.push('/cart')
    })
  }
}
4
Joao 2017-08-19 12:54.

Đây là bản hack của tôi (đây là tệp cấp gốc của tôi, với một chút redux được trộn vào đó - mặc dù tôi không sử dụng react-router-redux):

const store = configureStore()
const customHistory = createBrowserHistory({
  basename: config.urlBasename || ''
})

ReactDOM.render(
  <Provider store={store}>
    <Router history={customHistory}>
      <Route component={({history}) => {
        window.appHistory = history
        return (
          <App />
        )
      }}/>
    </Router>
  </Provider>,
  document.getElementById('root')
)

Sau đó, tôi có thể sử dụng window.appHistory.push()bất cứ nơi nào tôi muốn (ví dụ: trong các hàm cửa hàng redux / thunks / sagas, v.v.) Tôi đã hy vọng mình có thể sử dụng window.customHistory.push()nhưng vì một số lý do react-routerdường như không bao giờ cập nhật mặc dù url đã thay đổi. Nhưng theo cách này, tôi có các ví dụ CHÍNH XÁC react-routersử dụng. Tôi không thích đưa mọi thứ vào phạm vi toàn cầu và đây là một trong số ít những thứ tôi muốn làm điều đó. Nhưng nó tốt hơn bất kỳ giải pháp thay thế nào khác mà tôi đã thấy IMO.

4
Black 2017-07-25 03:26.

Nếu bạn đang sử dụng Redux, thì tôi khuyên bạn nên sử dụng gói npm react -router-redux . Nó cho phép bạn gửi các hành động điều hướng cửa hàng Redux.

Bạn phải tạo cửa hàng như được mô tả trong tệp Readme của họ .

Trường hợp sử dụng dễ dàng nhất:

import { push } from 'react-router-redux'

this.props.dispatch(push('/second page'));

Trường hợp sử dụng thứ hai với Container / Component:

Thùng đựng hàng:

import { connect } from 'react-redux';
import { push } from 'react-router-redux';

import Form from '../components/Form';

const mapDispatchToProps = dispatch => ({
  changeUrl: url => dispatch(push(url)),
});

export default connect(null, mapDispatchToProps)(Form);

Thành phần:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Form extends Component {
  handleClick = () => {
    this.props.changeUrl('/secondPage');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}/>
      </div>Readme file
    );
  }
}
4
skwidbreth 2017-11-22 06:40.

Tôi đã có thể thực hiện điều này bằng cách sử dụng bind(). Tôi muốn nhấp vào một nút index.jsx, đăng một số dữ liệu lên máy chủ, đánh giá phản hồi và chuyển hướng đến success.jsx. Đây là cách tôi giải quyết vấn đề đó ...

index.jsx:

import React, { Component } from "react"
import { postData } from "../../scripts/request"

class Main extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.postData = postData.bind(this)
    }

    handleClick() {
        const data = {
            "first_name": "Test",
            "last_name": "Guy",
            "email": "[email protected]"
        }

        this.postData("person", data)
    }

    render() {
        return (
            <div className="Main">
                <button onClick={this.handleClick}>Test Post</button>
            </div>
        )
    }
}

export default Main

request.js:

import { post } from "./fetch"

export const postData = function(url, data) {
    // post is a fetch() in another script...
    post(url, data)
        .then((result) => {
            if (result.status === "ok") {
                this.props.history.push("/success")
            }
        })
}

success.jsx:

import React from "react"

const Success = () => {
    return (
        <div className="Success">
            Hey cool, got it.
        </div>
    )
}

export default Success

Vì vậy, bằng cách liên kết thisvới postDatain index.jsx, tôi đã có thể truy cập this.props.historyvào request.js... sau đó tôi có thể sử dụng lại hàm này trong các thành phần khác nhau, chỉ cần đảm bảo rằng tôi nhớ đưa this.postData = postData.bind(this)vào constructor().

4
LuizAsFight 2019-04-01 20:29.

vì vậy cách tôi làm là: - thay vì chuyển hướng bằng cách sử dụng history.push, tôi chỉ sử dụng Redirectthành phần từ react-router-dom Khi sử dụng thành phần này, bạn có thể vượt qua push=truevà nó sẽ lo phần còn lại

import * as React from 'react';
import { Redirect } from 'react-router-dom';
class Example extends React.Component {
  componentDidMount() {
    this.setState({
      redirectTo: '/test/path'
    });
  }

  render() {
    const { redirectTo } = this.state;

    return <Redirect to={{pathname: redirectTo}} push={true}/>
  }
}
3
Priyansh Rastogi 2018-03-12 09:53.

Sử dụng Gọi lại. Nó đã làm việc cho tôi!

export function addProduct(props, callback) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
    .then(response => {
    dispatch({ type: types.AUTH_USER });
    localStorage.setItem('token', response.data.token);
    callback();
  });
}

Trong thành phần, bạn chỉ cần thêm lệnh gọi lại

this.props.addProduct(props, () => this.props.history.push('/cart'))
1
Snivio 2018-12-01 09:24.

Bộ định tuyến React V4 hiện cho phép sử dụng bộ hỗ trợ lịch sử như bên dưới:

this.props.history.push("/dummy",value)

Sau đó, giá trị có thể được truy cập ở bất cứ nơi nào có sẵn vị trí hỗ trợ state:{value}không phải là trạng thái thành phần.

0
jadlmir 2018-03-01 23:33.

bạn có thể sử dụng nó như thế này như tôi làm nó để đăng nhập và những thứ khác nhau manny

class Login extends Component {
  constructor(props){
    super(props);
    this.login=this.login.bind(this)
  }


  login(){
this.props.history.push('/dashboard');
  }


render() {

    return (

   <div>
    <button onClick={this.login}>login</login>
    </div>

)
0
David Bagdasaryan 2018-03-10 22:11.
/*Step 1*/
myFunction(){  this.props.history.push("/home"); }
/**/
 <button onClick={()=>this.myFunction()} className={'btn btn-primary'}>Go 
 Home</button>
0
Noname 2018-09-21 19:49.

bước một gói ứng dụng của bạn trong Bộ định tuyến

import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

Bây giờ toàn bộ Ứng dụng của tôi sẽ có quyền truy cập vào BrowserRouter. Bước hai, tôi nhập Route và sau đó chuyển các đạo cụ đó xuống. Có thể là trong một trong những tệp chính của bạn.

import { Route } from "react-router-dom";

//lots of code here

//somewhere in my render function

    <Route
      exact
      path="/" //put what your file path is here
      render={props => (
      <div>
        <NameOfComponent
          {...props} //this will pass down your match, history, location objects
        />
      </div>
      )}
    />

Bây giờ nếu tôi chạy console.log (this.props) trong tệp js thành phần của mình, tôi sẽ nhận được một cái gì đó giống như thế này

{match: {…}, location: {…}, history: {…}, //other stuff }

Bước 2 Tôi có thể truy cập đối tượng lịch sử để thay đổi vị trí của mình

//lots of code here relating to my whatever request I just ran delete, put so on

this.props.history.push("/") // then put in whatever url you want to go to

Ngoài ra, tôi chỉ là một sinh viên coding bootcamp, vì vậy tôi không phải là chuyên gia, nhưng tôi biết bạn cũng có thể sử dụng

window.location = "/" //wherever you want to go

Hãy sửa cho tôi nếu tôi sai, nhưng khi tôi kiểm tra điều đó, nó đã tải lại toàn bộ trang mà tôi nghĩ đã đánh bại toàn bộ điểm khi sử dụng React.

0
Nolesh 2019-07-05 14:58.

Tạo một tùy chỉnh Routervới riêng của nó browserHistory:

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const ExtBrowserRouter = ({children}) => (
  <Router history={history} >
  { children }
  </Router>
);

export default ExtBrowserRouter

Tiếp theo, trên Gốc nơi bạn xác định Router, hãy sử dụng như sau:

import React from 'react';       
import { /*BrowserRouter,*/ Route, Switch, Redirect } from 'react-router-dom';

//Use 'ExtBrowserRouter' instead of 'BrowserRouter'
import ExtBrowserRouter from './ExtBrowserRouter'; 
...

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ExtBrowserRouter>
          <Switch>
            ...
            <Route path="/login" component={Login}  />
            ...
          </Switch>
        </ExtBrowserRouter>
      </Provider>
    )
  }
}

Cuối cùng, nhập vào historynơi bạn cần và sử dụng nó:

import { history } from '../routers/ExtBrowserRouter';
...

export function logout(){
  clearTokens();      
  history.push('/login'); //WORKS AS EXPECTED!
  return Promise.reject('Refresh token has expired');
}
0
Kewal Shah 2020-05-19 08:53.

Nếu bạn muốn sử dụng lịch sử trong khi truyền một hàm dưới dạng giá trị cho phần hỗ trợ của Thành phần, với react-router 4, bạn có thể chỉ cần hủy cấu trúc phần historyhỗ trợ trong thuộc tính kết xuất của <Route/>Thành phần và sau đó sử dụnghistory.push()

    <Route path='/create' render={({history}) => (
      <YourComponent
        YourProp={() => {
          this.YourClassMethod()
          history.push('/')
        }}>
      </YourComponent>
    )} />

Lưu ý: Để điều này hoạt động, bạn nên bọc Thành phần BrowserRouter của React Router xung quanh thành phần gốc của bạn (ví dụ: có thể nằm trong index.js)

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Desiree Rogers, trái, và Cheryl Mayberry McKissack Chuyển sang, Fenty Beauty và Pat McGrath, có một đế chế làm đẹp mới do phụ nữ làm chủ đang trỗi dậy. Sau thương vụ mua lại mỹ phẩm Black Opal vào tháng 9, đội ngũ quyền lực của Giám đốc điều hành công ty Desiree Rogers và Chủ tịch Cheryl Mayberry McKissack đã thông báo mua lại thương hiệu làm đẹp tiên phong Fashion Fair từ người sáng lập Johnson Publishing Company (JPC).

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Đối với những người có quá nhiều thời gian, tiệc tiết lộ giới tính là một cách thú vị để không cần áp đặt những định kiến ​​hạn chế lên thai nhi trước một đối tượng bạn bè giả vờ quan tâm một cách lịch sự. Tuy nhiên, việc chỉ dựa vào những chiếc bánh nướng có màu nhân tạo để biểu thị một tiếng hoo-ha hoặc một đứa trẻ đi tè đã trở nên xa xỉ trong các bậc cha mẹ trên Instagram.

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Hôm thứ Tư, cựu Bộ trưởng An ninh Nội địa Kirstjen Nielsen vì một lý do nào đó đã được đưa ra một diễn đàn để phát biểu tại Hội nghị thượng đỉnh Những người phụ nữ quyền lực nhất của Fortune. Và có thể đoán trước được, người phụ nữ giám sát các nỗ lực (đang diễn ra) của chính quyền Trump nhằm chia cắt các gia đình ở biên giới đã sử dụng thời gian của mình như một cơ hội để tự bảo vệ mình và tự nhận mình là người — và hãy hít thở sâu ở đây — “đã nói sự thật với quyền lực.

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Vì thế hệ mới nhất của chiếc xe điều chỉnh được yêu thích trên thế giới hiện đã có mặt tại đây, nên chỉ có điều kiện là Toyota Racing Development sẽ đưa phiên bản Supra thế hệ thứ năm sửa đổi của riêng mình đến SEMA vào tháng tới. Toyota đã cho chúng tôi một gợi ý về những gì sẽ xảy ra trong tuần này: một chiếc Concept GR Supra 3000GT hiện đại.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language