如何重定向到另一条路线

Question

需要url认证：

import React from "react";
import { connect } from "react-redux";
import { Switch, Route, Redirect } from "react-router-dom";
...

const IndexRouter = ({ loggedIn }) => (
  <Switch>
    <Route
      path="/"
      render={() => (loggedIn ? <Redirect to="/dashboard" /> : <Login />)}
    />
    <Route exact path="/dashboard" component={DashboardRouter} />
    <Route exact path="/stock" component={StockRouter} />
  </Switch>
);

export default connect(
  state => ({
    loggedIn: state.persist.loggedIn
  }),
  {}
)(IndexRouter);

代码意味着如果我没有登录，客户端需要的所有 url 将重定向到Login 组件。除此之外，它将路由到DashboardRouter。 StockRouter 是另一个与DashboardRouter 相关的路由。

问题是，如果我登录。所有不特定的 url（/dashboard、/stock 除外）我手动输入显示 /dashboard url，没有任何内容。 /stock等具体的url可以直接显示组件StockRouter。

Answer 1

您需要在 Route 周围编写一个 PrivateRoute 包装器并更改 IndexRouter 中 Routes 的顺序，以便路径为 / 的 Route 最后匹配，否则所有路由将首先匹配 / 并将渲染不正确

const PrivateRoute = ({component: Component, loggedIn, ...rest }) => { 
           if(!loggedIn) {
               return <Redirect to="/login" />
           }
           return <Route {...rest} component={Component}/> 
        }
    } 
} 

const IndexRouter = ({ loggedIn }) => (
  <Switch>
    <PrivateRoute exact path="/dashboard" component={DashboardRouter} />
    <PrivateRoute exact path="/stock" component={StockRouter} />
    <Redirect to="/dashboard" />
  </Switch>
);

更多详情请查看Performing Authentication on Routes with react-router-v4

Answer 2

只需像这样创建一个历史组件：

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

let globalHistory = null;

class HistoryComponent extends React.Component {
  componentWillMount() {
    const {history} = this.props;
    globalHistory = history;
  }

  componentWillReceiveProps(nextProps) {
    globalHistory = nextProps.history;
  }

  render() {
    return null;
  }
}

export const GlobalHistory = withRouter(HistoryComponent);

export default function gotoRoute(route) {
  return globalHistory.push(route);
}

然后导入到你的组件中：

import gotoRoute from "../../history";

gotoRoute({
                        pathname: "/your_url_here",
                        state: {
                            id: this.state.id
                        }
                    });

在 index.js 中

import {GlobalHistory} from "./history";

ReactDOM.render((
  <Provider store={store}>
    <BrowserRouter >
      <div>
        <GlobalHistory/>
        <App/>
      </div>
    </BrowserRouter>
  </Provider>

), document.getElementById('root'));