React routing within another component V6

Question

Im using Reavt V6 route.

Im struggeling to get my routes inside gamecomponent to work.

visiting /test results in a completly blank page. while it should load crime module within gamecomponent. visiting / renders gamecomponent, but /test does not render gamecomponent and the route within that.

How do i make this to work?

visiting url /crime should result in gamecomponent beeing loaded, and that

<Route path="/test" element={<Crime />} />

should be loaded.

app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import GameComponent from './gameComponent.jsx';
import { BrowserRouter as Router } from 'react-router-dom';
import { Routes, Route, Navigate, Outlet, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Login from './components/login/login.jsx';



function App() {
    
  return (

  <Router>
    <Routes>
       <Route path="/login" element={<Login />} />
       <PrivateRoute  isAuth={true} path="/" component={GameComponent}  redirectTo='/login'/>
    </Routes>
  </Router>
  );
}
export default App;

privateroute:

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Navigate } from 'react-router-dom';
import { useNavigate  } from "react-router-dom";
import Login from './components/login/login.jsx';
import GameComponent from './gameComponent.jsx';


const PrivateRoute = ({ component: Component, redirectTo, isAuth, path, ...props }) => {
    //isAuth = false;
    
    if(!isAuth) {
        return <Navigate to={redirectTo} />;
    }
    return <Route path={path} element={<Component />} />
};

export default PrivateRoute;

gamecomponent:

import React, {Component} from 'react';
//import Component from 'react-dom';
import SideBarRight from './components/game/sideBarRight.jsx';
import SideBarLeft from './components/game/sideBarLeft.jsx';
import Crime from './components/game/crime.jsx';
import Login from './components/login/login.jsx';
import './gameComponent.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { BrowserRouter} from "react-router-dom";


class GameComponent extends Component{
 constructor() {
    super();
    this.state = {
    userData: {
        user: {cash:0, bank:0, weapon:'', username: 'test', locationname: 'Bankok',
        defence: 0},
        rankbar: {rankpercent: 50, rank: 'Mafia'},
        }
    }
    
    
    
    
  }


render() {
    return (
    <div className="main">
    <div className="sidebar left">
                <SideBarLeft/>

    </div>
    <div className="middleContentHolder">
     <Route path="/" element={<Crime />} />
    <Route path="/test" element={<Crime />} />
    <Route path="/crime" element={<Crime />} />
    <Route path="/test2" element={<SideBarRight UserData={this.state.userData} />} />


        <div className="col-8">
            <div className="content">
            <div className="header"><span>Test...</span></div>
            
            </div>
        </div>
    </div>
    <div className="sidebar right">
        <SideBarRight UserData={this.state.userData}/>
        </div>
    </div>
    );
  }
    
}



export default GameComponent;

Luis Paulo Pinto · Accepted Answer · 2020-09-03T15:56:16.510

5

According to React Router documents:

You can render a element anywhere you need one, including deep within the component tree of another . These will work just the same as any other , except they will automatically build on the path of the route that rendered them. If you do this, make sure to put a * at the end of the parent route's path. Otherwise the parent route won't match the URL when it is longer than the parent route's path, and your descendant won't ever show up.

You can read more about it here - Descendant Routes

So, you just need to do 2 little changes:

app.js

Add * to yout path in PrivateRoute:

<Routes>
   <Route path="/login" element={<Login />} />
   <PrivateRoute
      isAuth={true}
      // Here's the trick
      path="/*"
      component={GameComponent}
      redirectTo="/login"
   />
</Routes>

gamecomponent.jsx

Wrapper Route with <Routes>:

<Routes>
   <Route path="/" element={<Crime />} />
   <Route path="/test" element={<Crime />} />
   <Route path="/crime" element={<Crime />} />
   <Route
      path="/test2"
      element={<SideBarRight UserData={this.state.userData} />}
    />
</Routes>

Here´s a code sample: codesandbox

You can check it with routes:

/ => show crime component

/crime => show crime component

/anticrime => show antcrime component

edited Sep 03 '20 at 15:56

answered Sep 02 '20 at 03:46

Luis Paulo Pinto

2,626
9
24

It seems like its working to get into the gamecomponent. as gamecomponent loads correctly, but the views is not there. the middleContentHolder is empty. – Anetellie Sep 02 '20 at 18:11
looks like it wont show anything within the Routes. – Anetellie Sep 02 '20 at 18:12
Hi @MalinPedersen, i did a POC with it and worked fine. It isnt showing the routes for you? like `/crime` ? – Luis Paulo Pinto Sep 02 '20 at 18:36
/crime loads the gamecomponent, but nothing in middleContentHolder, where the crime should be loaded. ( you have anywhere we could chat?) – Anetellie Sep 02 '20 at 18:37
And if i tell you that i dont know how to start a chat from here (LOL). So, i added a code sample for you. – Luis Paulo Pinto Sep 02 '20 at 18:53
will take a look at it now. u have discord? i believe your answer is right tho. just weird it wont work for me. – Anetellie Sep 02 '20 at 18:54

score 0 · Answer 2 · answered Aug 30 '20 at 21:57

0

Instead of element={<Crime />} you should use: component={Crime}.

Check the documentation for reference.

In your PrivateRoute component, you might want to enhance it using the <Redirect> component.

Please refer to the answer to this question, even has a post with a very good explanation that might help you.

answered Aug 30 '20 at 21:57

rleiva93

66
3

hmm. changed my element to component etg the crime route. but that dosent make any difference it still wont load. will look at that answer tho. – Anetellie Aug 30 '20 at 22:17
will that make any diff in v6 @rleiva93 ? – Anetellie Aug 30 '20 at 22:19
If it matches the current documentation of the React Router (https://reactrouter.com/web/api/Route/component) it won't make any difference. – rleiva93 Aug 30 '20 at 22:24
unfortunly it does @rleiva93 – Anetellie Aug 31 '20 at 18:01
You're totally right... Sorry about that... You might want to check this: https://github.com/ReactTraining/react-router/blob/dev/docs/installation/getting-started.md I case you haven't figured it out. – rleiva93 Aug 31 '20 at 18:55

React routing within another component V6

2 Answers2