Why this navigation doesn't working in react

Hello,

Why this navigation does not work in react?

export default class Navigation extends Component{

Constructor(props){
Super(props);
this.state={
redirect:null,
};
}

onNavToEditor=async()=>{
this.setState({ redirect:"/ImageEfditor"});
};

render(){
return(
<div>

<div> onClick={this.onNavToEditor}</div>

</div>

)

}

}

Based on:

thanks;

1 Like

Off the top of my head, where is this trying to navigate? All I see is that it’s setting local state.

And “constructor” and “super” are both spelled in lowercase.

1 Like

can you give the full pen please?

1 Like
//import axios from 'axios';
import React, { Component } from 'react';

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


export default class ImageUpload extends Component {
    static displayName = ImageUpload.name;

    constructor(props) {
        super(props);
        this.state = {
            redirect: null,
            selectedFile: null,
            description: null,
            uploadResult: null,
            fileIdList: []
        };
    }

    getList = () => {
        fetch('api/Image')
            .then(response => response.json())
            .then(data => this.setState({ fileIdList: data }));
    };

    componentDidMount() {
        this.getList();
    };

    onFileChange = event => {
        this.setState({ selectedFile: event.target.files[0] });
    };
    onDescriptionChange = event => {
        this.setState({ description: event.target.value })
    };
    onFileUpload = async () => {

        const formData = new FormData();

        formData.append(
            "ImageData.File",
            this.state.selectedFile,
            this.state.selectedFile.name
        );


        //try {

        fetch('/api/Image', {
            method: 'POST',
            body: formData
        }).then(resposne => resposne.json())
            .then(data => {
                console.log(data);
                this.setState({ uploadResult: "File " + data.fileName + " successfully uploaded." });
                this.getList();
            });
        //console.log(res);

        //} catch (ex) {
        //    console.log(ex);
        //}
    };


    onNavToEditor = async () => {

        //this.props.history.push
        //history.pu
        this.setState({ redirect: "/ImageEditor" });
      
        
    };

    //try {
    //    const res = await axios.post("Image/Image/Post", formData)
    //    console.log(res);

    //} catch (ex) {
    //    console.log(ex);
    //}
//};
 

    listItems = () => {
        const listItems = this.state.fileIdList.map((item) =>
            <div key={item.imageId.toString()}>
                <img src={"/api/Image/DownloadImage/" + item.imageId}
                    alt={item.fileName}
                    className="img-thumbnail"
                    height="100" width="100" />
            </div>
        );
        return (<div>{listItems}</div>);
    };

    render() {

        return (
            <div>
                <h1>File Upload Demo</h1>
                <div>{this.state.uploadResult} onClick={this.onNavToEditor}</div>
                <div>
                    <input type="file" onChange={this.onFileChange} />
                    <input type="text" value={this.state.value} onChange={this.onDescriptionChange} />
                    <button onClick={this.onFileUpload}>
                        Upload!
                    </button>
                 
                </div>

                {this.listItems()}
               
            </div>
        );
    }
}
import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';

import { Search } from './components/Search';
import { Search1 } from './components/Search1';
import { Search2 } from './components/Search2';
import { Grid } from './components/Grid';
import { Upload } from './components/Upload';

import './custom.css'
import ImageEditor from './components/ImageEditor';
import { FileUpload } from './components/FileUpload';
import { Grid2 } from './components/Grid2';
import DevGrid1 from './components/DevGrid1';
import ImageUpload from './components/ImageUpload';
import ImageUpload1 from './components/ImageUpload1';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

export default class App extends Component {
  static displayName = App.name;

  render () {
    return (
      <Layout>
        <Route exact path='/' component={Home} />
        <Route path='/counter' component={Counter} />
        
            <Route path='/fetch-data' component={FetchData} />
            <Route path='/ImageEditor' component={ImageEditor} />
            <Route path='/Search' component={Search} />
            <Route path='/Search1' component={Search1} />
            <Route path='/Search2' component={Search2} />
            <Route path='/Grid' component={Grid} />
            <Route path='/Upload' component={Upload} />
            <Route path='/FileUpload' component={FileUpload} />

            <Route path='/Grid2' component={Grid2} />
            <Route path='/DevGrid1' component={DevGrid1} />
            <Route path='/ImageUpload' component={ImageUpload} />
            //<Route path='/ImageUpload1' component={ImageUpload1} />

      </Layout>
    );
  }
}

import React, { Component } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';

export class NavMenu extends Component {
  static displayName = NavMenu.name;

  constructor (props) {
    super(props);

    this.toggleNavbar = this.toggleNavbar.bind(this);
    this.state = {
      collapsed: true
    };
  }

  toggleNavbar () {
    this.setState({
      collapsed: !this.state.collapsed
    });
  }

  render () {
    return (
      <header>
        <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
          <Container>
            <NavbarBrand tag={Link} to="/">imageEditor3</NavbarBrand>
            <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
            <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
              <ul className="navbar-nav flex-grow">
                <NavItem>
                  <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
                            </NavItem>

                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/ImageEditor">Image Editor</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/Search">Search</NavLink>
                            </NavItem>

                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/Search1">Search1</NavLink>
                            </NavItem>

                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/Search2">Search2</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/Grid">Grid</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/Upload">Upload</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/FileUpload">FileUpload</NavLink>
                            </NavItem>
                            //<NavItem>
                            //    <NavLink tag={Link} className="text-dark" to="/Grid1">Grid1</NavLink>
                            //</NavItem>
                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/Grid2">Grid2</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/DevGrid1">DevGrid1</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink tag={Link} className="text-dark" to="/ImageUpload">ImageUpload</NavLink>
                            </NavItem>
                            

              </ul>
            </Collapse>
          </Container>
        </Navbar>
      </header>
    );
  }
}

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  </BrowserRouter>,
  rootElement);

registerServiceWorker();


1 Like

If this is wrong, is there any way to use the redirect method between two-component?
What is the best way?

1 Like

I’m still very confused re what you want to do here. Where is the redirect? There seems to be no redirect component anywhere, all you’re doing is setting a property on a component’s state, which doesn’t do anything. I think you’ve misunderstood the article. Have you read the react router docs? Because the code from the article you’ve copied into a component is just a snippet from the docs.

So it’s still very confusing, but I think you want to upload a file, and when it uploads, navigate? This is trivial with hooks, but if you’re using a redirect component then you need to look at the documentation and examples (or you can just push to history).

1 Like

At last, I found the answer;

import React, { Component } from 'react';
import { Redirect } from "react-router-dom";
export class Navigation extends Component {

    constructor(props) {
        super(props);
        this.state = {redirect: null};
        this.onNavToEditor = this.onNavToEditor.bind(this);
    }

    onNavToEditor = async () => {
        this.setState({ redirect: "/counter" });
    };

    render() {
        if (this.state.redirect) {
            return <Redirect to={this.state.redirect} />
        }
        return (
            <div>
                <div onClick={this.onNavToEditor}>Click me to redirect to the counter page.</div>
            </div>
        );
    }
}
1 Like