如何在单独的页面中呈现反应组件？

Question

登录后我需要移动到仪表板页面，我使用历史记录推送方法，但是它出现在同一页面中，我需要在其他页面中使用它，如何克服它？

我的dashboard.js：

import React from 'react';
import ReactDOM from 'react-dom';

const  Dashboard = (props) => {
 console.log(props);
    return <h2>Hi, this is Dashboard page</h2>;
  }


export default Dashboard;

我的重定向代码是：

if(status === "success"){
                this.setState({
                    errMsg: "",
                    loading:false
                  });
                  this.props.history.push('/dashboard');
            }

我的app.js代码是：

function App() {
  return (
    <Router>
    <Route path="/" component={Login} />
    <Route path="/dashboard" component={Dashboard} />
   </Router>
  );
}

Answer 1

这是您的路由器和路由出现的问题。

尝试使用类似这样的东西。

function App() {
  return (
    <Router>
    <Route exact path="/" component={Login} />
    <Route exact path="/dashboard" component={Dashboard} />
   </Router>
  );
}

React-router-dom将检查是否完全匹配。

Answer 2

Router将呈现所有匹配的路径，而"/"匹配所有路径。您可以在exact登录路径上指定"/"道具，也可以使用Switch渲染 only 第一个匹配项。

function App() {
  return (
    <Router>
      <Route exact path="/" component={Login} />
      <Route path="/dashboard" component={Dashboard} />
   </Router>
  );
}

或

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/" component={Login} />
      </Switch>
   </Router>
  );
}

Switch

渲染与以下项匹配的第一个子项<Route>或<Redirect> 位置。

首先将路由顺序交换到更具体的路径。