Home / Questions / 424861
Accepted
ricardo leiva sikic
Asked: 2022-02-01 17:05:26 +0800 CST 2022-02-01 17:05:26 +0800 CST

React router dom doesn't redirect me to view

  • 772

Hello, I am having problems routing from a button to a view in react, I already installed it react-router-dom, but what happens to me is that if I click the signup button in the home view, it should redirect me to the route /test, but it does not happen , what happens is that it marks the route in the url but the content of the view is rendered to me in the same home view and it is not seen (if I do not inspect html). My configuration is the following:

In views/home:

    // React
    import React from 'react';

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

    // Style
    import './style.sass';

    import homeImage from '../../assets/images/home/home-image.png';

    class Home extends React.Component {
        render() {
            return(
                <div className="home-container">
                    <div className="home-content-left">
                        <h1 className="find-books-text">FIND BOOKS</h1>
                        <h1 className="find-books-text">YOU LIKE</h1>
                        <button><Link to='/test'>SIGN UP</Link></button>
                    </div>
                    <div className="home-image-picture">
                        <img src={homeImage} />
                    </div>
                    <div className="home-figure">

                    </div>
                </div>
            );
        }
    }

    export default Home;

In index.js:

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

// Context Provider
import AppProvider from '../src/context/context';

// React-bootstrap styles
import 'bootstrap/dist/css/bootstrap.min.css';

// React router dom
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
{/*     <AppProvider> */}
      <BrowserRouter>
        <App />
      </BrowserRouter>
{/*     </AppProvider> */}
  </React.StrictMode>,
  document.getElementById('root')
);

Inside app.js:

// React
import React, { Fragment } from 'react';

// Components
import Home from '../src/views/Home/index';
import NavBar from './components/navbar';

// Routes
import Routes from './route';

function App() {
  return (
    <Fragment>
      <Home />
      <NavBar />
      <Routes />
    </Fragment>
  );
}

Besides I have a folder in src/route where I have the routes:

    // React
    import React from 'react';

    // React-router-dom
    import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

    // Views
    import Test from '../views/Test';
    import Home from '../views/Home';

    class Routes extends React.Component {
    render() {
        return (
            <Switch>
                <Route
                path="/"
                component={Home} exact/>
                <Route
                path="/test"
                component={Test} />
            </Switch>
        );
    }
    }
    export default Routes;
reactjs

2 Answers

  1. Best Answer

    What happens is that it marks the route in the url but the content of the view is rendered in the same home view

    With the current configuration, when you want to hide the component Homerouting to the component Test, Homeit is shown again, since it is positioned above <Routes>, which is where the content for each route was specified:

    function App() {
  return (
    <Fragment>
      <Home /> {/*Siempre se muestra*/}
      <NavBar />
      <Routes />{/*Luego están mis rutas*/}
    </Fragment>
  );
}

    The content of the route "/" has already been configured, it directs towards the component Home, this inside Routes:

    class Routes extends React.Component {
  render() {
      return (
          <Switch>
              <Route
              path="/"
              component={Home} exact/>
              <Route
              path="/test"
              component={Test} />
          </Switch>
      );
  }
}

    So, just reconfigure the initial component tree in App:

    function App() {
  return (
    <Fragment>
      {/*<Home /> se quita, está demás*/}
      <Routes />{/*inicia el manejo de contenidos de las rutas*/}
      <NavBar />
    </Fragment>
  );
}

    Here's a demo based on your original code:

    const Router = window.ReactRouterDOM.BrowserRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;
const Switch = window.ReactRouterDOM.Switch;

function App(){
  return(
    <div>
    <ReactRouterDOM.HashRouter>
      <Routes />
      <NavBar />
    </ReactRouterDOM.HashRouter>
    </div>
  );
}

class Home extends React.Component {
  render() {
      return(
          <div className="home-container">
            <button><Link to='/test'>SIGN UP</Link></button>
          </div>
      );
  }
}

class Routes extends React.Component {
  render() {
      return (
          <Switch>
              <Route
              path="/"
              component={Home} exact/>
              <Route
              path="/test"
              component={Test} />
          </Switch>
      );
  }
}

class Test extends React.Component{
  render(){
    return (
      <div>
        <h3>Test</h3>
        <button><Link to='/'>Back to Home</Link></button>
      </div>
    );
  }
}

class NavBar extends React.Component{
  render(){
    return <h3>Navbar</h3>
  }
}
 
 
ReactDOM.render(<App/>, document.getElementById('root'))
    <script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
 

<div id="root"></div>

    Hope this answer is helpful.

    • 1

  2. try using the history property that your component receives, like so:

    import React,{Component} from 'react';

class App extends Component{
  gotoTest = () => {
    this.props.history.push('/test')
  }

  render() {
    return (
      <div>
        <button onClick={this.gotoTest}>Home</button>
      </div>
    )
  }
}

export default App;
    • 0