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

Question

我是 React 新手，开始使用基本路由，我对路由有严重疑问。

我有 3 页 "Welcome.js" , "Signin.js, "Signup.js".
"Welcome.js" 包含登录和注册按钮。
点击登录和注册按钮，它会转到相应的页面。
登录和注册页面都包含一个后退按钮，点击后退按钮会转到 welcome.js 页面。
登录页面包含文本 "if your a newuser go to signup"，注册页面包含文本 "already a user, go to login"。单击该文本，它会转到相应的页面。

所以我的问题是，如果我单击 "if your a newuser go to signup" 并进入注册页面并按后退按钮，它会转到 "welcome page"。我希望它转到登录页面，因为注册页面来自单击登录页面中的文本。

请给我一个想法，这样我就可以在以后的工作中实现这个路由。

Answer 1

这应该适合你。您可以使用 React 路由器和 withRouter hoc 访问 history 道具以推送到其他屏幕。

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'));

如果您想在任何页面中使用 link，只需

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 应用程序中进行动态路由

React - How to do Dynamic Routing in React app

reactjs

react-router-v4

react-router-dom