About retrieving page name in index page - reactjs

Question

Goal:
When you write url "https://react-router-with-params-aq6utk.stackblitz.i/test" I would like to display the page test.
Problem:
Is it possble to retrieve the value 'test' and use it at app.js?
Today it doesn't work.
Info:
*Newbie in reactjs
Stackblitz:
https://stackblitz.com/edit/react-uaofyx?file=src%2FApp.js
app.js
import React, { Component } from 'react';
import { HomeComponent } from './Containers/HomeComponent';
import DashboardComponent from './Containers/DashboardComponent';
import ContactComponent from './Containers/ContactComponent';
import { Switch, Route, Link } from 'react-router-dom';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
};
}
render() {
console.log(this.props.id);
console.log(this.props);
if (this.props.id === 'test') {
return (
<div>
<Switch>
<Route path="/test" exact component={ContactComponent} />
</Switch>
</div>
);
} else {
return (
<div>
<Switch>
<Route
path="/dashboard/:id"
render={(props) => (
<DashboardComponent {...props} isAuthed={true} />
)}
/>
<Route path="" exact component={HomeComponent} />
</Switch>
</div>
);
}
}
}
export default App;
ContactComponent.js
import React from 'react';
export const ContactComponent = ({ value }) => {
const name = 'CONTACT';
return <h1>{name}</h1>;
};
DashboardComponent.js
import React, { Component } from 'react';
class DashboardComponent extends Component {
constructor(props) {
super(props);
console.log(this.props.match.params.id);
}
render() {
return <div>Hello from dashboard.. ffff</div>;
}
}
export default DashboardComponent;
HomeComponent.js
import React from 'react';
export const HomeComponent = ({ value }) => {
const name = 'rajesh';
return <h1>{name}</h1>;
};

Answer 1

There are some issues with the implementaion of Route. also, you export the ContactComponent without default but you used it in App.js with the default import statement.
The working code:
import React, { Component } from 'react';
import { HomeComponent } from './Containers/HomeComponent';
import DashboardComponent from './Containers/DashboardComponent';
import { ContactComponent } from './Containers/ContactComponent';
import { Switch, Route, Link, BrowserRouter as Router } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path="/test" exact component={ContactComponent} />
<Route
path="/dashboard/:id"
component={(props) => <DashboardComponent {...props} isAuthed={true} />}
/>
<Route path="" exact component={HomeComponent} />
</Switch>
</Router>
);
}
}
export default App;
check the live version on stackblitz
Explanation:
If you export a variable with the default keyword, so you need to import it without {}
const first = 'first'
const second = 'second'
export first
export default second
Now in usage:
import second, {first} from 'myVariables';
Also, your route configuration with react-router-dom will look like this:
<BrowserRouter>
<Switch>
<Route path="/" exact={true} component={Home} />
<Route path="/about" exact={true} component={About} />
<Route path="/contact" exact={true} component={Contact} />
// rest of the routes ...
</Switch>
</BrowserRouter>
Note: Your App.js component is the root component so there aren't any props with it.