Reactjs React路由器v5的故障_Reactjs_React Redux_React Router

Reactjs React路由器v5的故障

reactjs

Reactjs React路由器v5的故障,reactjs,react-redux,react-router,Reactjs,React Redux,React Router,我试图在用户配置文件中显示一个设置页面，其中包含多个路由，例如我的帐户、更改密码等…） /settings页面的默认布局显示在/settings上，但后续页面（/settings/account、/settings/change password）拒绝显示。我已经尝试了几个小时来解决这个问题，但似乎找不到解决方案 Index.js ReactDOM.render( <Provider store={store}> <ConnectedRouter history={

我试图在用户配置文件中显示一个设置页面，其中包含多个路由，例如我的帐户、更改密码等…）

/settings页面的默认布局显示在/settings上，但后续页面（/settings/account、/settings/change password）拒绝显示。我已经尝试了几个小时来解决这个问题，但似乎找不到解决方案

Index.js

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

function App() {
  const [loading, setLoading] = useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(attemptGetUser())
      .then(() => setLoading(false))
      .catch(() => setLoading(false));
    // eslint-disable-next-line
  }, []);

  return loading ? (
    <Loading cover="page" />
  ) : (
    <div className="App">
      <Switch>
        <Route path="/" component={Views} />
      </Switch>
    </div>
  );
}

export const Views = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Redirect to="/dashboard" />
      </Route>
      <Route path="/auth">
        <AuthLayout />
      </Route>
      <Route path="/">
        <AppLayout />
      </Route>
    </Switch>
  );
};

export default withRouter(Views);

const AppViews = ({ match }) => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <ProtectedRoute path={`/dashboard`} component={Dashboard} />
        <ProtectedRoute path={`/settings`} component={Settings} />
        <ProtectedRoute path={`/logout`} component={Logout} />
        <Redirect from={`${match.url}`} to={'/dashboard'} />
      </Switch>
    </Suspense>
  );
};

export default AppViews;

const SettingOption = ({ match, location }) => {
  return (
    <Menu
      defaultSelectedKeys={`${match.url}/account`}
      mode="inline"
      selectedKeys={[location.pathname]}
    >
      <Menu.Item key={`${match.url}/account`}>
        <UserOutlined />
        <span>My Account</span>
        <Link to={`account`} />
      </Menu.Item>
      <Menu.Item key={`${match.url}/change-password`}>
        <LockOutlined />
        <span>Change Password</span>
        <Link to={`change-password`} />
      </Menu.Item>
    </Menu>
  );
};

const SettingContent = ({ match }) => {
  return (
    <Switch>
      {/* <Redirect exact from={`${match.url}`} to={`${match.url}/account`} /> */}
      <Route path={`${match.url}/account`} component={EditProfile} />
      <Route path={`${match.url}/change-password`} component={ChangePassword} />
    </Switch>
  );
};

export class Setting extends Component {
  render() {
    return (
      <InnerAppLayout
        sideContentWidth={320}
        sideContent={<SettingOption {...this.props} />}
        mainContent={<SettingContent {...this.props} />}
      />
    );
  }
}

export default Setting;

ReactDOM.render(
,
document.getElementById（'root'））
);

App.js

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

function App() {
  const [loading, setLoading] = useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(attemptGetUser())
      .then(() => setLoading(false))
      .catch(() => setLoading(false));
    // eslint-disable-next-line
  }, []);

  return loading ? (
    <Loading cover="page" />
  ) : (
    <div className="App">
      <Switch>
        <Route path="/" component={Views} />
      </Switch>
    </div>
  );
}

export const Views = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Redirect to="/dashboard" />
      </Route>
      <Route path="/auth">
        <AuthLayout />
      </Route>
      <Route path="/">
        <AppLayout />
      </Route>
    </Switch>
  );
};

export default withRouter(Views);

const AppViews = ({ match }) => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <ProtectedRoute path={`/dashboard`} component={Dashboard} />
        <ProtectedRoute path={`/settings`} component={Settings} />
        <ProtectedRoute path={`/logout`} component={Logout} />
        <Redirect from={`${match.url}`} to={'/dashboard'} />
      </Switch>
    </Suspense>
  );
};

export default AppViews;

const SettingOption = ({ match, location }) => {
  return (
    <Menu
      defaultSelectedKeys={`${match.url}/account`}
      mode="inline"
      selectedKeys={[location.pathname]}
    >
      <Menu.Item key={`${match.url}/account`}>
        <UserOutlined />
        <span>My Account</span>
        <Link to={`account`} />
      </Menu.Item>
      <Menu.Item key={`${match.url}/change-password`}>
        <LockOutlined />
        <span>Change Password</span>
        <Link to={`change-password`} />
      </Menu.Item>
    </Menu>
  );
};

const SettingContent = ({ match }) => {
  return (
    <Switch>
      {/* <Redirect exact from={`${match.url}`} to={`${match.url}/account`} /> */}
      <Route path={`${match.url}/account`} component={EditProfile} />
      <Route path={`${match.url}/change-password`} component={ChangePassword} />
    </Switch>
  );
};

export class Setting extends Component {
  render() {
    return (
      <InnerAppLayout
        sideContentWidth={320}
        sideContent={<SettingOption {...this.props} />}
        mainContent={<SettingContent {...this.props} />}
      />
    );
  }
}

export default Setting;

函数应用程序（）{
const[loading，setLoading]=useState（true）；
const dispatch=usedpatch（）；
useffect（（）=>{
分派（attemptGetUser（））
.然后（（）=>setLoading（false））
.catch（（）=>setLoading（false））；
//eslint禁用下一行
}, []);
退货(
) : (
);
}

视图/index.js

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

function App() {
  const [loading, setLoading] = useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(attemptGetUser())
      .then(() => setLoading(false))
      .catch(() => setLoading(false));
    // eslint-disable-next-line
  }, []);

  return loading ? (
    <Loading cover="page" />
  ) : (
    <div className="App">
      <Switch>
        <Route path="/" component={Views} />
      </Switch>
    </div>
  );
}

export const Views = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Redirect to="/dashboard" />
      </Route>
      <Route path="/auth">
        <AuthLayout />
      </Route>
      <Route path="/">
        <AppLayout />
      </Route>
    </Switch>
  );
};

export default withRouter(Views);

const AppViews = ({ match }) => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <ProtectedRoute path={`/dashboard`} component={Dashboard} />
        <ProtectedRoute path={`/settings`} component={Settings} />
        <ProtectedRoute path={`/logout`} component={Logout} />
        <Redirect from={`${match.url}`} to={'/dashboard'} />
      </Switch>
    </Suspense>
  );
};

export default AppViews;

const SettingOption = ({ match, location }) => {
  return (
    <Menu
      defaultSelectedKeys={`${match.url}/account`}
      mode="inline"
      selectedKeys={[location.pathname]}
    >
      <Menu.Item key={`${match.url}/account`}>
        <UserOutlined />
        <span>My Account</span>
        <Link to={`account`} />
      </Menu.Item>
      <Menu.Item key={`${match.url}/change-password`}>
        <LockOutlined />
        <span>Change Password</span>
        <Link to={`change-password`} />
      </Menu.Item>
    </Menu>
  );
};

const SettingContent = ({ match }) => {
  return (
    <Switch>
      {/* <Redirect exact from={`${match.url}`} to={`${match.url}/account`} /> */}
      <Route path={`${match.url}/account`} component={EditProfile} />
      <Route path={`${match.url}/change-password`} component={ChangePassword} />
    </Switch>
  );
};

export class Setting extends Component {
  render() {
    return (
      <InnerAppLayout
        sideContentWidth={320}
        sideContent={<SettingOption {...this.props} />}
        mainContent={<SettingContent {...this.props} />}
      />
    );
  }
}

export default Setting;

导出常量视图=（）=>{
返回(
);
};
使用路由器导出默认值（视图）；

AppViews/index.js

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

function App() {
  const [loading, setLoading] = useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(attemptGetUser())
      .then(() => setLoading(false))
      .catch(() => setLoading(false));
    // eslint-disable-next-line
  }, []);

  return loading ? (
    <Loading cover="page" />
  ) : (
    <div className="App">
      <Switch>
        <Route path="/" component={Views} />
      </Switch>
    </div>
  );
}

export const Views = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Redirect to="/dashboard" />
      </Route>
      <Route path="/auth">
        <AuthLayout />
      </Route>
      <Route path="/">
        <AppLayout />
      </Route>
    </Switch>
  );
};

export default withRouter(Views);

const AppViews = ({ match }) => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <ProtectedRoute path={`/dashboard`} component={Dashboard} />
        <ProtectedRoute path={`/settings`} component={Settings} />
        <ProtectedRoute path={`/logout`} component={Logout} />
        <Redirect from={`${match.url}`} to={'/dashboard'} />
      </Switch>
    </Suspense>
  );
};

export default AppViews;

const SettingOption = ({ match, location }) => {
  return (
    <Menu
      defaultSelectedKeys={`${match.url}/account`}
      mode="inline"
      selectedKeys={[location.pathname]}
    >
      <Menu.Item key={`${match.url}/account`}>
        <UserOutlined />
        <span>My Account</span>
        <Link to={`account`} />
      </Menu.Item>
      <Menu.Item key={`${match.url}/change-password`}>
        <LockOutlined />
        <span>Change Password</span>
        <Link to={`change-password`} />
      </Menu.Item>
    </Menu>
  );
};

const SettingContent = ({ match }) => {
  return (
    <Switch>
      {/* <Redirect exact from={`${match.url}`} to={`${match.url}/account`} /> */}
      <Route path={`${match.url}/account`} component={EditProfile} />
      <Route path={`${match.url}/change-password`} component={ChangePassword} />
    </Switch>
  );
};

export class Setting extends Component {
  render() {
    return (
      <InnerAppLayout
        sideContentWidth={320}
        sideContent={<SettingOption {...this.props} />}
        mainContent={<SettingContent {...this.props} />}
      />
    );
  }
}

export default Setting;

const-AppViews=（{match}）=>{
返回(
);
};
导出默认应用程序视图；

Settings/index.js

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

function App() {
  const [loading, setLoading] = useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(attemptGetUser())
      .then(() => setLoading(false))
      .catch(() => setLoading(false));
    // eslint-disable-next-line
  }, []);

  return loading ? (
    <Loading cover="page" />
  ) : (
    <div className="App">
      <Switch>
        <Route path="/" component={Views} />
      </Switch>
    </div>
  );
}

export const Views = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Redirect to="/dashboard" />
      </Route>
      <Route path="/auth">
        <AuthLayout />
      </Route>
      <Route path="/">
        <AppLayout />
      </Route>
    </Switch>
  );
};

export default withRouter(Views);

const AppViews = ({ match }) => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <ProtectedRoute path={`/dashboard`} component={Dashboard} />
        <ProtectedRoute path={`/settings`} component={Settings} />
        <ProtectedRoute path={`/logout`} component={Logout} />
        <Redirect from={`${match.url}`} to={'/dashboard'} />
      </Switch>
    </Suspense>
  );
};

export default AppViews;

const SettingOption = ({ match, location }) => {
  return (
    <Menu
      defaultSelectedKeys={`${match.url}/account`}
      mode="inline"
      selectedKeys={[location.pathname]}
    >
      <Menu.Item key={`${match.url}/account`}>
        <UserOutlined />
        <span>My Account</span>
        <Link to={`account`} />
      </Menu.Item>
      <Menu.Item key={`${match.url}/change-password`}>
        <LockOutlined />
        <span>Change Password</span>
        <Link to={`change-password`} />
      </Menu.Item>
    </Menu>
  );
};

const SettingContent = ({ match }) => {
  return (
    <Switch>
      {/* <Redirect exact from={`${match.url}`} to={`${match.url}/account`} /> */}
      <Route path={`${match.url}/account`} component={EditProfile} />
      <Route path={`${match.url}/change-password`} component={ChangePassword} />
    </Switch>
  );
};

export class Setting extends Component {
  render() {
    return (
      <InnerAppLayout
        sideContentWidth={320}
        sideContent={<SettingOption {...this.props} />}
        mainContent={<SettingContent {...this.props} />}
      />
    );
  }
}

export default Setting;

const SettingOption=（{match，location}）=>{
返回(
我的帐户
修改密码
);
};
常量设置内容=（{match}）=>{
返回(
{/*  */}
);
};
导出类设置扩展组件{
render（）{
返回(
);
}
}
导出默认设置；

ProtectedRoute

const ProtectedRoute = ({ path, component }) => {
  const { isAuth } = useSelector((state) => state.user);

  return isAuth ? (
    <Route path={path} exact component={component} />
  ) : (
    <Redirect to="/auth/login" />
  );
};

const ProtectedRoute=（{path，component}）=>{
const{isAuth}=useSelector（（state）=>state.user）；
返回isAuth(
) : (
);
};

非常感谢您的帮助。蒂亚

您需要在

AppViews/index.js

<ProtectedRoute exact path={`/settings`} component={Settings} />

<Route exact path={`${match.url}/account`} component={EditProfile} />
<Route exact path={`${match.url}/change-password`} component={ChangePassword} />

在Settings/index.js路由上？我在

AppViews/index.js

设置路由时也没有使用

exact

，我这样做了，当转到

/settings/account

时，它会将我重定向到

/dashboard

。这几乎就像

在

设置/index.js

中没有被识别一样，它可能发生在

受保护路由

组件内部的逻辑b/c，您能分享一下吗，请检查一下该组件内部发生了什么？这是因为这一行{/**/}