React - Как сделать динамическую маршрутизацию в приложении React

Question

Я новичок, чтобы реагировать и начал работать с основными маршрутами, у меня есть серьезные сомнения в маршрутизации.

1. У меня есть 3 страницы "Welcome.js", "Signin.js," Registration.js ".

2. "Welcome.js" содержит кнопку входа и регистрации.

3. нажав на кнопку входа и регистрации, он перейдет на соответствующие страницы.

4. на страницах входа и регистрации есть кнопка, при нажатии на которую она переходит на страницу welcome.js.

5. страница входа содержит текст «если ваш новый пользователь идет в регистрацию», а страница регистрации содержит текст «уже пользователь, войдите в систему». при нажатии на эти тексты, он переходит на соответствующие страницы.

так что моя проблема в том, что если я нажму «если ваш новый пользователь перейдет в регистрацию» и зайдет на страницу регистрации и нажатием кнопки перейдет на «страницу приветствия». я хочу, чтобы он перешел на страницу входа, потому что страница регистрации появляется при нажатии на текст со страницы входа.

пожалуйста, дайте мне идею, чтобы я мог реализовать эту маршрутизацию в моих будущих работах.

Answer 1

Я приведу базовый пример использования маршрутизации, возможно, это поможет.Сначала у меня есть папка src / routers, которая содержит все мои маршруты.Внутри этой папки у нас есть файл src / router / 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 к домену

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>

response-router-dom даже имеет перенаправление...

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

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

Надеюсь, это поможет.

Answer 2

Это должно работать для вас. Вы можете использовать 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>);
}