Question

我是新来的反应者，开始使用基本路线，我对路线有严重怀疑。

我有3页的“ Welcome.js”，“ Signin.js，“ Signup.js”。
“ Welcome.js”包含登录和注册按钮。
单击“登录”和“注册”按钮，它会转到各自的页面。
登录页面和注册页面都包含一个后退按钮，单击后退按钮将进入welcome.js页面。
登录页面包含文本“如果您是新用户，请登录”，而登录页面包含文本“已经有用户，请登录”。单击这些文本，它会转到相应的页面。

所以我的问题是，如果我单击“如果您的新用户去注册”，然后进入注册页面，然后按返回按钮，则会进入“欢迎页面”。我希望它转到登录页面，因为注册页面来自单击登录页面中的文本。

请给我个主意，以便我在以后的工作中实现此路由。

Answer 1

这应该为您工作。您可以使用React Router和withRouter hoc来访问历史记录道具以推送到其他屏幕。

import { Router, Route, Switch, withRouter } from 'react-router';

const welcome = withRouter(({ history }) => {
  return (
    <>
      <button onClick={() => history.push('/signup')}>Signup</button>
      <button onClick={() => history.push('/sigin')}>SignIn</button>
    </>
  );
})

const signIn = withRouter(({ history }) => {
  return (
    <button onClick={() => history.push('/signup')} />
  );
})

const signUp = withRouter(({ history }) => {
  return (
    <button onClick={() => history.push('/signin')} />
  );
})

const App = () => {
  return (<Router history={history}>
    <Switch>
      <Route path="/welocome" component={welcome} />
      <Route path="/signin" component={signin} />
      <Route path="/signup" component={signup} />
    </Switch>
  </Router>);
}

Answer 2

我将为您提供有关如何使用路由的基本示例，也许这会有所帮助。首先，我有一个src / routes文件夹，其中包含我的所有路由。在此文件夹中，我们有一个src / routes / index.js处理所有路由。

class Routes extends Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" render={props => <Dashboard {...props} />} />
                    <Route path="/login" render={props => <Login {...props} />} />
                    <Route path="/register" render={props => <Register {...props} />} />
                </Switch>
            </BrowserRouter>
            )
        }
    }
export default Routes;

然后将所有路由导入src / App.js

import React, { Component } from 'react'
import Routes from './routes'; 

class App extends Component {
  render() {
    return (
      <div>
        <Routes />
      </div>
    )
  }
}

export default App;

最近在src / index.js中进入dom

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


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

如果您想在任何一个页面中使用链接

import { Link } from 'react-router-dom';

<Link to="/login">
  <Button type="button">
     Login
  </Button>
</Link>

react-router-dom甚至具有重定向。...

import { Redirect } from 'react-router-dom';

var { redirect } = this.state;
   if(redirect) 
      return <Redirect to='/login' />

我希望这会有所帮助。

React-如何在React应用中进行动态路由

2 个答案: