React prop not being passed to component - reactjs

Question

The code below is a react component called Start. Its function is to take in a players name via a form with onSubmit. It stores the players name in a hook called "player". Then it passes the player name prop to another component called GameBoard. Once the submit button is pressed the browser navigates to the GameBoard component via react-router-dom. The GameBoard Component is then supposed to display the players name that passed to it in the Start component.
The issue I'm having is that the player name state is not being passed into the GameBoard component. When onSubmit is initiated the page changes to the GameBoard but the player name doesn't get passed. Any ideas?
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
//styles
import { Wrapper, Content } from "../styles/start.styles";
//component
import GameBoard from "../components/gameBoard.component.jsx";
const Start = (props) => {
const [player, setPlayer] = useState("");
let handleChange = (event) => {
event.preventDefault();
setPlayer(event.target.value);
};
let handleSubmit = () => {
if (player === "") {
alert("Please enter a players name");
} else {
window.history.replaceState(null, "GameBoard", "/gameboard");
}
};
useEffect(() => {
console.log(player);
});
return (
<Router>
<Switch>
<Route exact path="/">
<Wrapper>
<Content>
<h1>Trivia Words</h1>
<h2>Start Menu</h2>
<form onSubmit={handleSubmit}>
<label>Enter Player Name:</label>
<input type="text" onChange={handleChange}></input>
<input type="submit" value="Start"></input>
</form>
</Content>
</Wrapper>
</Route>
<Route exact path="/gameboard">
<GameBoard playerName={player} />
</Route>
</Switch>
</Router>
);
};
export default Start;
GameBoard Component below
import React, { useState } from "react";
//styles
import { Wrapper, Content } from "../styles/gameBoard.styles";
const GameBoard = (props) => {
const [playerName, setPlayerName] = useState(props.playerName);
const [letters, setLetters] = useState([]);
const [triviaQA, setTriviaQA] = useState([]);
const [gameOver, setGameOver] = useState(false);
return (
<Wrapper>
<Content>Player Name: {playerName}</Content>
</Wrapper>
);
};
export default GameBoard;

Answer 1

creating a derived state from props is in general bad practice. you should consume your props directly, and if you need to update its state at Child Component you should pass a setState prop as well:
import React, { useState } from "react";
//styles
import { Wrapper, Content } from "../styles/gameBoard.styles";
const GameBoard = (props) => {
const [letters, setLetters] = useState([]);
const [triviaQA, setTriviaQA] = useState([]);
const [gameOver, setGameOver] = useState(false);
return (
<Wrapper>
<Content>Player Name: {props.playerName}</Content>
</Wrapper>
);
};
export default GameBoard;
also, you seem not using the proper navigation from react-router-dom at your handleSubmit.
you could create a Form Player component and import useHistory and push to the desired route to be able to use useHistory or wrap your component with BrowserRouter:
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, useHistory } from "react-router-dom";
//styles
import { Wrapper, Content } from "../styles/start.styles";
//component
import GameBoard from "../components/gameBoard.component.jsx";
const Start = (props) => {
const [player, setPlayer] = useState("");
let handleChange = (event) => {
event.preventDefault();
setPlayer(event.target.value);
};
useEffect(() => {
console.log(player);
});
return (
<Router>
<Switch>
<Route exact path="/">
<Wrapper>
<Content>
<h1>Trivia Words</h1>
<h2>Start Menu</h2>
<PlayerNameForm player={player} handleChange={handleChange} />
</Content>
</Wrapper>
</Route>
<Route exact path="/gameboard">
<GameBoard playerName={player} />
</Route>
</Switch>
</Router>
);
};
export default Start;
const PlayerNameForm = ({player, handleChange}) => {
const history = useHistory();
let handleSubmit = () => {
if (player === "") {
alert("Please enter a players name");
} else {
history("/gameboard");
}
};
return (
<form onSubmit={handleSubmit}>
<label>Enter Player Name:</label>
<input type="text" onChange={handleChange}></input>
<input type="submit" value="Start"></input>
</form>
)
}