when I started the project I did not work with create-react-app
I built the basic react-flux app like always which is with browserify and babelify and all
and the react-router v4 was working and no problem happened
then I immigrated to create-react-app env
to use the testing and building tools that is offered
and I installed all packages that I used previously properly
but react-router v4 had a problem
when I click NavLink, it does not change the URL
but when I change the URL manually it works fine
I use BrowserRouter like this:
<BrowserRouter history={HashRouter}<App /></BrowserRouter>,document.getElementById("root"));
And NavLink like this:
<NavLink className="nav-link" activeClassName="active" to={"/drugs"}>
<i className="fa fa-medkit" aria-hidden="false"/>
Drugs
</NavLink>
And Router like this:
<Switch>
<Route exact={true} path="/" component={Patients}/>
<Route exact path="/drugs" component={Drugs}/>
<Route exact path="/settings" component={Settings}/>
<Route path="*" component={Error}/>
</Switch>
and thanks in advance.
Most likely your component does not update properly. This can happen if you inherit from React.PureComponent instead of React.Component or mess up with the method shouldComponentUpdate().
If you can't figure it out (you should), you can still pass the location object manually with the HOC withRouter from react-router-dom like so :
import { withRouter } from 'react-router-dom';
const Menu = ({ location }) => (
<menu>
<NavLink
className="nav-link"
activeClassName="active"
location={location}
to="/drugs"
>
<i className="fa fa-medkit" aria-hidden="false" />
Drugs
</NavLink>
</menu>
);
export default withRouter(Menu);
Note: Most imports have been stripped out for clarity
The problem is <Navlink to={"/drugs"}. When you use {} You're indicating that you'll be using JS, and since "/drugs" is not valid js it fails.
Instead remove the {}.
<NavLink className="nav-link" activeClassName="active" to="/drugs">
Related
I deployed one website on localhost, with npm build / react, and I would like to select another landing page.
However I'm a newbie working with React and I don't know where to find the routes for the pages. I have the following codes in the public/Index.html, public/manifest.json, and package.json from root folder.
I tried modifying the homepage in package.json to another folder/.ts/.tsx files but without any success.
Any idea in how to find the routes to other pages and how to set the landing page to them for localhost server ?
you don't touch the public folder for routes, and assuming you want to link to another page like you want to go from / to /about then you need to do this:
this will be your home page - app.tsx
import { BrowserRouter, Routes, Route} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About/>} />
</Routes>
</BrowserRouter>
);
}
this will be your about file, about.tsx
import { Link } from 'react-router-dom';
function About() {
return (
<div>
<nav>
<Link to="/">Home Page</Link>
</nav>
</div>
);
}
To understand more about routes please check the documentation below
React router V6
This isn't happening on my local server,
but when I push my create-react-app to gh-pages and try to reload anything besides the home page, or navigate directly to a routed page, the page breaks and the URL repeatedly grows looking like this...
https://hellocentral.live/about/?p=/&q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/~and~q=p=/....
Here is my file with my routes...
import React from "react";
import "./SiteContainer.scss";
import HeaderContainer from "../HeaderContainer/HeaderContainer";
import { Route, Switch } from "react-router-dom";
import About from "../About/About";
import Home from "../Home/Home";
import Music from "../Music/Music";
import Footer from "../Footer/Footer";
import Merch from "../Merch/Merch";
import Pics from "../Pics/Pics";
import Contact from "../Contact/Contact";
export const SiteContainer = () => {
return (
<div className="site-container">
<HeaderContainer />
<Switch>
<Route path="/about" component={About} />
<Route path="/merch" component={Merch} />
<Route path="/music" component={Music} />
<Route path="/pics" component={Pics} />
<Route path="/contact" component={Contact} />
<Route path="/" component={Home} />
</Switch>
<Footer />
</div>
);
};
export default SiteContainer;
here is my repo
https://github.com/monstaro/hc3/tree/master/src
The site is https://www.hellocentral.live
Any help would be appreciated!
You need to wrap the Switch component in a Router component. To do this, you need to import it from the react-router-dom package:
import { HashRouter as Router } from 'react-router-dom'
...
<Router basename={process.env.PUBLIC_URL}>
<Switch>
...
</Switch>
</Router>
I gave HashRouter as example because GH Pages does not support the other router, BrowserRouter. Probably, MemoryRouter or StaticRouter do work, but I am not sure.
Since your domain is https://www.hellocentral.live, you need to set segmentCount to 0 here.
Guess you're using an older version of rafgraph/spa-github-pages cited in a blog or something. I would recommend updating index.html with the latest version of the script and 404.html with this script.
From the docs,
Note that if you are setting up a Project Pages site and not using a custom domain (i.e. your site's address is username.github.io/repo-name), then you need to set pathSegmentsToKeep to 1 in the 404.html file in order to keep /repo-name in the path after the redirect.
If I create a react app, and in this app there's a link to a local html file, once this app published on gh-pages, for some reasons said link doesn't lead anywhere, it just redirect the user on the same page he was in before clicking the link .
For exemple:
If I create a simple app with CRA like so :
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
I'm the homepage
<a id='testlink' href='html2.html'> Go to the second page </a>
</div>
);
}
}
export default App;
And in the public folder I create a new html file "html2.html" that simply says
I am the second app !
And that's all, a simple app supposed to jump from index.html to html2.html when a link is clicked. Well this app works fine when tested with npm start, it works fine if launched via the static html file provided with npm run build, but when deployed on gh-pages, suddendly the link does not lead anywhere.
Here is the app described above deployed on ghpages
One workaround this problem would be to upload all the apps separately on gh-pages, or to use react router, but I wanted to know if I was just missing something. Thanks for your help.
On React projects you should use react-router to handle routes and change pages.
Simple example:
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic} />
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
);
export default BasicExample;
So I've got React Router set up and I'm trying to run it from WordPress.
The app routes correctly as long as you start from the root "/". However if you manually navigate to any subpage via the address bar, React Router seems to only take over from there.
For example.
Hitting / will render the homepage. If you click the link 'style-guide' it will correctly route you to /style-guide and render the page.
However, if you manually navigate to /style-guide in your address bar, react will render the homepage there, and if you now click the style-guide link it will bring you to /style-guide/style-guide
What I need to do is tell react-router to always start from the root URL.
My Routes Look Like this
import {
BrowserRouter as Router,
Route,
Redirect,
Switch,
} from 'react-router-dom'
import PageContainer from 'containers/pageContainer'
class RoutesList extends React.Component {
render() {
return (
<Router>
<div>
<Switch>
<Route path="/" component={PageContainer} />
<Route path="style-guide" component={PageContainer} />
<Route
render={() => {
return <Redirect to="/" />
}}
/>
</Switch>
</div>
</Router>
)
}
}
export default RoutesList
Make your routes exact paths
<Route exact path="/" component={PageContainer} />
<Route exact path="/style-guide" component={PageContainer} />
Looking at this video the react router seems easy to use, but I can't find how to navigate in my code since I want to link on clicking a div and not use <Link>.
I've search StackOverflow but haven't found any answers that work with 4.0. Trying to import browserHistory gives undefined (before and after installing 'react-router' in addition to 'react-router-dom') from this question:
import { browserHistory } from 'react-router';
console.log('browserHistory:', browserHistory);
I also saw somewhere that there is a 'context' you can get to, but this shows a value for 'match' but not 'context':
<Route path="/" render={({ match, context}) => {
console.log('match:', match);
console.log('context:', context);
Edit
In the dev tools I can see that "Router" has a history property, so when I add that I can get to it:
<Route path="/" render={({ match, context, history}) => {
Is there a way to get to this from outside a route? For example a navbar component that will navigate to other components, but is not inside a Route itself...
If I understand your question, this is how you make a link programaticaly.
class Test extends React.Component {
handleClick() {
console.log(this.context);
this.context.router.history.push('/some/path');
},
render() {
return (
<div onClick={handleClick}>
This is div.
</div>
)
}
}
Test.contextTypes = {
router: React.PropTypes.object.isRequired
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
Had to read into the docs more. The history object is only passed as a property using the component (or other) attributes on a Route. Apparently need to include the 'history' package and use createBrowserHistory and pass it to the Router, then specify the component in a Route. I think this should work fine since exact isn't specified...
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
ReactDOM.render( (
<Router history={ history }>
<Route path="/" component={ App } />
</Router>
),
document.getElementById('root')
);
Before I just had <App/> inside <Router> and didn't have access to those properties.
Why don't you just wrap your div in the link instead of trying to circumvent it and make your life easier?
<Link to="/" >
<div className="to-component">go to component</div>
</Link>