Well, I defined the react router as follows:
<BrowserRouter>
<Routes>
<Route path="/" exact element={<Home/>} />
<Route path="details/:id" element={<ViewNote/>}/>
</Routes>
</BrowserRouter>
and I called it like this in the class component:
import React, { Component } from 'react'
export default class ViewNote extends Component {
componentDidMount(){
console.log(this.props.match.params.id);
}
render() {
return (
<div>
<h2>{this.props.match.params.id}</h2>
</div>
)
}
}
But it shows match undefined in the console!!!
how to solve it??
thanks.
Related
as you may get from the title, passing props in react is not working. And i don´t get why.
import styled from 'styled-components';
const Login = (props) => {
return<div>Login</div>
}
export default Login;
On my App.js page here is the following:
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/" >
<Login />
</Route>
</Routes>
</Router>
</div>
);
}
export default App;
Problem: if i start the script and render the page, nothing is shown. What am I doing wrong?
You should pass <Login /> as the element. Try this code:
App.js:
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/" element={<Login />} />
</Routes>
</Router>
</div>
);
}
export default App;
<Login />... the Login component isn't passed any props so I wouldn't expect to see any in the component. Your issue is a misunderstanding how the Route component works. The only valid children of the Route component is another Route component in the case of nesting routes, otherwise, the routed content is passed on the Route component's element prop as a ReactNode, a.k.a. JSX.
Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactNode | null;
index?: boolean;
path?: string;
}
The Login component should be passed to the element prop.
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Login />} />
</Routes>
</Router>
</div>
);
}
For more details/explanation see Why does <Route> have an element prop instead of render or component?
I have a react application.
i have problem in routing of component
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from './app';
ReactDOM.render(
<App/>,
document.getElementById("root")
);
app.jsx
Here i am routing 2 component. Login and Main component. In Main component there are many router which will use for dashboard.
My Problem : In <Switch> the 1st <Route> can render but it's not rendering from 2nd router if i hardcode in url
http://localhost:3000/#/login == rendering
http://localhost:3000/#/main = Not rendering
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom';
import Login from './login';
import Main from './main';
import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();
class App extends Component {
constructor(props) {
super(props);
window.token = '';
}
render() {
return <div>
<Router>
<Switch>
<Route to="/login" component={Login} exact />
<Route to="/main" component={Main} exact/>
</Switch>
</Router>
</div>;
}
}
export default App;
main.jsx
import React, {Component} from 'react';
import ReactDOM from "react-dom";
import { HashRouter, Route, Switch } from "react-router-dom";
import indexRoutes from "routes/index.jsx";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard.css?v=1.2.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";
import Login from './login';
class Main extends Component {
constructor(props) {
super(props);
}
render() {
return <HashRouter>
<Switch>
{indexRoutes.map((prop, key) => {
return <Route to={prop.path} component={prop.component} key={key} />;
})}
</Switch>
</HashRouter>;
}
}
export default Main;
Use
<Route path="/login" component={Login} exact />
Instead of to use path
<Route path="/login" component={Login} />
<Route path="/main" component={Main} exact/>
Use Path insted of To
Don't use exact attribute in main Route as shown below.
class App extends Component {
render() {
return <div>
<Router>
<Switch>
...
<Route to="/main" component={Main} />
</Switch>
</Router>
</div>;
}
}
There are two problems with your code
First in your app.jsx file:
<Switch>
<Route
to="/login" // <== should be path="/login"
component={Login}
exact
/>
<Route
to="/main" // <== should be path="/main"
component={Main}
exact // <== remove exact prop for the nested routes to work
/>
</Switch>
Here to prop actually belongs to the <Link/> component provided by react-router not the <Route /> component, It should be path prop.
If you want to render child routes within <Route /> component then we never use exact prop on the Parent <Route /> component.
Second in your main.jsx file:
indexRoutes.map((prop, key) => {
return (
<Route
to={prop.path} // <== should be path={prop.path}
component={prop.component}
key={key} />;
);
})
Again change to prop to path prop.
I have this:
import { Route } from 'react-router-dom'
const App = () => (
<div>
{header} // or the header block
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
)
Then my About component looks like this:
const About = () => {
// contentFor header
const myCustomHeader = <div>About header</div>
return (
<div>
About page
</div>
)
}
Is there a way to replace the header in the App component with the myCustomHeader component from the About component ?
You can pass a function prop to update the parents state. You'll have to use render instead of component on your Route to pass props.
import { Route } from 'react-router-dom'
import React from 'react'
class App extends React.Component{
state = {
header:"One Header"
}
render(){
return (
<div>
{this.state.header} // or the header block
<Route exact path="/" component={Home} />
<Route path="/about" render={()=><About updateHeader={(newHeader)=>this.setState({header:newHeader})} />}/>
</div>
)
}
}
And your About :
import React from 'react'
class About extends React.Component{
render(){
this.props.updateHeader(<div>About header</div>);
return (
<div>
About page
</div>
)
}
}
I'm working on a website on reactJS. I use radium and react router for the routes.
I have a lot of problems with routes...
On my main page there is a fixed nav bar menu with a link to the documentation page.
On this documentation page I also have this bar but to access to other links I have to click 2 times to get there..
class App extends Component {
render() {
return (
<Router history={hashHistory}>
<Switch>
<Route exact path="/" component={LandingPage}/>
<Route path="/documentation" component={DocumentationRoutes}/>
<Route path="/blog" component={OnContrustion}/>
<Route path="/contactus" component={OnContrustion}/>
</Switch>
</Router>
);
}
}
export default App;
Here is the DocumentationRoutes:
class DocumentationRoutes extends Component {
render() {
return (
<Router history={hashHistory}>
<Switch>
<Route path="/documentation" component={Documentation}/>
<IndexRoute component={Documentation} />
</Switch>
</Router>
);
}
}
export default DocumentationRoutes;
and the documentation :
class Documentation extends Component {
render() {
return (
<VerticalLayout>
<StretchLayout>
<NavBar />
</StretchLayout>
<StretchLayout margin="20">
<CenterLayout>
<SubTitle>Documentation</SubTitle>
</CenterLayout>
<DocMenu />
</StretchLayout>
</VerticalLayout>
);
}
}
export default Documentation;
Is it the right way to use react router ?
What can I do to be redirected after only one click ?
On the first click, the url change correctly but not the page.
Thanks,
You only need to use the Router component in the initial routes definition. Your DocumentationRoutes component should be:
Also in react-router v4 IndexRoute no longer exists.
class DocumentationRoutes extends Component {
render() {
return (
<Switch>
<Route path="/documentation" component={Documentation}/>
<Route component={Documentation} />
</Switch>
);
}
}
export default DocumentationRoutes;
I want to write a Router in React Project. But Route children and cloneElement work not anymore by Version 4. I haven't found demo or tutor to teach how to pass value in router in Router Version 4.
Have someone idea to solve that?
My project in Github: https://github.com/LeMueller/musicplayer-by-react/tree/dev
Thanks a lot.
import React, {Component} from 'react';
import Header from './commen/header.js';
import Player from './page/player.js';
import {MUSIC_LIST} from '../config/musiclist';
import MusicListUI from './page/musiclistui.js';
import {HashRouter, Switch, Route, Link} from 'react-router-dom';
class MusicApp extends Component{
constructor(props){
super(props);
this.state={
musiclist: MUSIC_LIST,
currentMusicItem: MUSIC_LIST[0]
}
}
componentDidMount(){
$('#player').jPlayer({
ready:function(){
$(this).jPlayer('setMedia',{
mp3:'http://oj4t8z2d5.bkt.clouddn.com/%E9%AD%94%E9%AC%BC%E4%B8%AD%E7%9A%84%E5%A4%A9%E4%BD%BF.mp3'
}).jPlayer('play');
},
supplied:'mp3',
wmode: 'window'
});
}
componentWillUnMount(){
}
render(){
return(
<div>
{React.cloneElement(this.props.children, this.state)}
</div>
)
}
}
export default class Root extends Component{
render(){
return(
<HashRouter>
<div>
<Header/>
<Route exact path="/" component={MusicApp}>
<Route exact path="/" component={Player }></Route>
<Route path="/list" component={MusicListUI}></Route>
</Route>
</div>
</HashRouter>
)
}
}
If you are looking to pass props to a component via a component, then you can use render, for example:
<Route exact path="/" render={(props) => <Player example={ props.example } /> }></Route>